কোনও ওয়েব পৃষ্ঠা লোড হওয়ার পরে আপনি কীভাবে স্বয়ংক্রিয়ভাবে পাঠ্যবক্সে ফোকাস সেট করবেন?

164

এটি করার জন্য কোনও এইচটিএমএল ট্যাগ আছে বা এটি জাভাস্ক্রিপ্টের মাধ্যমে সম্পন্ন করতে হবে?

javascript html

— মার্ক বাইক
সূত্র

blog.jerodsanto.net/2009/05/jquery-set-mouse-focus-on-page-load

— অর্জুন

245

আপনি যদি jquery ব্যবহার করছেন:

$(function() {
  $("#Box1").focus();
});

বা প্রোটোটাইপ:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

বা সরল জাভাস্ক্রিপ্ট:

window.onload = function() {
  document.getElementById("Box1").focus();
};

তবে মনে রাখবেন যে এটি লোড হ্যান্ডলারগুলিতে অন্যকে প্রতিস্থাপন করবে, সুতরাং প্রতিস্থাপনের পরিবর্তে অনলোড লোকেদের যুক্ত করার জন্য সুরক্ষিত উপায়ের জন্য গুগলে অ্যাডলয়েডএভেন্ট () সন্ধান করুন।

— বেন শিমিরমন
সূত্র

3

হ্যান্ডলারের দেহের উপাদানকে কেন রাখবেন না? কোন রেফারেন্স? ধন্যবাদ

— আলেকজান্ডার টর্সলিং

7

কারণ এটি এইচটিএমএল থেকে জাভাস্ক্রিপ্ট পৃথক করা অনেক ক্লিনার। আপনার HTML এ চাক্ষুষ উপাদানগুলিতে স্ক্রিপ্টিং আচরণ যুক্ত করা উচিত।

— বেন স্কিমারান

94

এইচটিএমএলে সমস্ত ফর্ম ক্ষেত্রে একটি autofocusবৈশিষ্ট্য রয়েছে। এটিতে এইচটিএমএল 5 তে ডাইভে একটি ভাল টিউটোরিয়াল রয়েছে । দুর্ভাগ্যক্রমে এটি বর্তমানে 10 টিরও কম IE সংস্করণ দ্বারা সমর্থিত নয় ।

এইচটিএমএল 5 বৈশিষ্ট্যটি ব্যবহার করতে এবং একটি জেএস বিকল্পে ফিরে যেতে:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

কোনও জিকিউরি, অনলোড বা ইভেন্ট হ্যান্ডলারগুলির প্রয়োজন নেই, কারণ জেএসটি এইচটিএমএল উপাদানটির নীচে।

সম্পাদনা: অন্য সুবিধাটি হ'ল এটি কিছু ব্রাউজারে জাভাস্ক্রিপ্ট বন্ধ হয়ে যায় এবং আপনি যখন পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান না তখন আপনি জাভাস্ক্রিপ্ট সরিয়ে ফেলতে পারেন।

সম্পাদনা 2: ফায়ারফক্স 4 এখন autofocusঅ্যাট্রিবিউটকে সমর্থন করে , কেবল সমর্থন ছাড়াই আইই ছেড়ে চলেছে ।

— dave1010
সূত্র

3

কি দিয়ে autofocus="aufofocus"? লিঙ্কের সাথে আপনি শুধু অ্যাট্রিবিউট যোগ করার জন্য বলতে প্রদান করা হয়েছে: autofocus।

— Gerrat

6

এক্সএইচটিএমএল এবং এইচটিএমএল 4 এর দিনগুলিতে attribute="value"বুলিয়ান বৈশিষ্ট্যের জন্য এটি করা সাধারণ ছিল । এইচটিএমএল 5 "খালি অ্যাট্রিবিউট সিনট্যাক্স" সহ এসেছিল এবং আমরা অতিরিক্ত কাজটি বাদ দিয়েছি। এখন আমরা করতে পারি<input checked disabled autofocus data-something>

— dave1010

আমি এই পদ্ধতির পছন্দ করি ... এই কোডটি ইনপুটটির সাথে সম্পর্কিত ... ইনপুট এবং বুম থেকে মুক্তি পান, সম্পর্কিত কোডটি ঠিক সেখানে রয়েছে ... আমরা আজকাল এতটা হারিয়েছি ... পুরো বৃত্তে যাচ্ছি এখন সরল করার চেষ্টা করছি। ..

— সার্জ

16

আপনার জাভাস্ক্রিপ্ট ব্যবহার করা দরকার:

<BODY onLoad="document.getElementById('myButton').focus();">

@ বেন দ্রষ্টব্য যে আপনার যাতে ইভেন্ট হ্যান্ডলারগুলি যুক্ত করা উচিত নয়। যদিও এটি অন্য প্রশ্ন, তিনি আপনাকে এই ফাংশনটি ব্যবহার করার পরামর্শ দেন:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

এবং তারপরে আপনার পৃষ্ঠায় অ্যাডলয়েডএভেন্টে কল করুন এবং কোনও ফাংশনকে উল্লেখ করুন যা আপনার পছন্দসই পাঠ্যবাক্সকে কেন্দ্র করে।

— Espo
সূত্র

14

টেক্সটফিল্ডে কেবল অটোফোকাস লিখুন। এটি সহজ এবং এটি এর মতো কাজ করে:

 <input name="abc" autofocus></input>

আশাকরি এটা সাহায্য করবে.

— অর্জুন
সূত্র

1

এটি ভাল তবে সমস্যাটি হ'ল যদি আপনার স্লাইডিং শৈলীর সাথে পদক্ষেপ থাকে তবে ইনপুট টাইপটি 3 বা প্রাক্তনের 4 ধাপে থাকলে কার্যকর হবে না

— কোবে ব্রায়ান

12

আপনি jquery এইভাবে ব্যবহার করে এটি সহজেই করতে পারেন:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

এই ফাংশনটি কল করে $(document).ready()।

এর অর্থ যখন ডিওএম প্রস্তুত হবে তখন এই ফাংশনটি কার্যকর হবে।

রেডি ফাংশন সম্পর্কে আরও তথ্যের জন্য, দেখুন: http://api.jquery.com/ تیار/

— আমির চত্বরবাহর
সূত্র

11

সরল ভ্যানিলা এইচটিএমএল এবং জাভাস্ক্রিপ্ট ব্যবহার করা

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

তাদের বাইরে। নেট ফ্রেমওয়ার্ক এবং অ্যাসপেট ২.০ বা তার বেশি ব্যবহার করা, এটি তুচ্ছ। আপনি যদি ফ্রেমওয়ার্কটির পুরানো সংস্করণ ব্যবহার করছেন তবে আপনাকে উপরের মতো কিছু জাভাস্ক্রিপ্ট লিখতে হবে।

আপনার অন্লোড হ্যান্ডলারে (সাধারণত পৃষ্ঠার লোড আপনি যদি ভিজ্যুয়াল স্টুডিওতে সরবরাহিত স্টক পৃষ্ঠার টেম্পলেট ব্যবহার করেন) আপনি ব্যবহার করতে পারেন:

সি শার্প

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(* দ্রষ্টব্য আমি ফাংশন নাম থেকে আন্ডারস্কোর চরিত্রটি সরিয়েছি যা সাধারণত পেজ_ল্ড হয় কারণ কোনও কোড ব্লকে এটি সঠিকভাবে রেন্ডার করতে অস্বীকৃতি জানায়! কীভাবে অনস্কেপড রেন্ডার করতে আন্ডারস্কোর পাবেন তা আমি মার্কআপ ডকুমেন্টেশনে দেখতে পেলাম না।)

আশাকরি এটা সাহায্য করবে.

— জন
সূত্র

7

আইএমএইচও, পৃষ্ঠায় প্রথম, দৃশ্যমান, সক্ষম টেক্সট ক্ষেত্রটি নির্বাচন করার 'পরিষ্কারতম' উপায়টি হল jQuery ব্যবহার করা এবং এর মতো কিছু করা:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

আশা করি এইটি কাজ করবে...

ধন্যবাদ ...

— পুনরায় জীবত করা
সূত্র

6

<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>

— জোয়েল কোহোর্ন
সূত্র

5

সাধারণ পরামর্শ হিসাবে, আমি ঠিকানা বার থেকে ফোকাসটি চুরি না করার পরামর্শ দেব recommend ( জেফ ইতিমধ্যে এটি সম্পর্কে কথা বলেছেন। )

ওয়েবপৃষ্ঠাটি লোড হতে কিছুটা সময় নিতে পারে, যার অর্থ হল আপনার ফোকাস পরিবর্তনটি ব্যবহারকারী পায়ের ইউআরএল টাইপ করার পরে দীর্ঘকাল হতে পারে। তারপরে আপনি নিজের পৃষ্ঠাটি লোড করার সময় এবং আপনার পাঠ্যবক্সে ফোকাসটি চুরি করার সময় তিনি তার মন পরিবর্তন করতে এবং url টাইপিংয়ে ফিরে আসতে পারেন।

এটিই একমাত্র এবং একমাত্র কারণ যা আমাকে আমার প্রথম পৃষ্ঠা হিসাবে Google কে সরিয়ে দেয়।

অবশ্যই আপনি যদি নেটওয়ার্কটি (স্থানীয় নেটওয়ার্ক) নিয়ন্ত্রণ করেন বা ফোকাস পরিবর্তনটি কোনও গুরুত্বপূর্ণ ব্যবহারযোগ্যতার সমস্যা সমাধানের জন্য হয় তবে আমি যা বলেছিলাম তা সব ভুলে যান :)

— ভিনসেন্ট রবার্ট
সূত্র

আমি কিছু ক্ষেত্রে আপনার সাথে একমত। তবে, আমার নির্দিষ্ট ক্ষেত্রে আমি কিছুটা ডিপ পপ করছি যা কেবল একটি ইনপুট বাক্স। ব্যবহারকারীর কিছু প্রবেশ করার কথা রয়েছে এবং তত্ক্ষণাত্ ডিভটি বন্ধ করে ফোকাসটি সেট করা সহজ y

— মার্ক বাইক

2

আমার কিছুটা আলাদা সমস্যা ছিল আমি চেয়েছিলাম autofocus, তবে, placeholderপাঠ্যটি ক্রস-ব্রাউজারে থাকতে চেয়েছিল । কিছু ব্রাউজার placeholderক্ষেত্র ফোকাস করার সাথে সাথে পাঠ্যটি আড়াল করে রাখত, কেউ কেউ তা রাখবে। আমাকে হয় স্থানধারীদের ক্রস ব্রাউজারে থাকতে হয়েছিল, যার অদ্ভুত পার্শ্ব প্রতিক্রিয়া রয়েছে, বা ব্যবহার বন্ধ করতে হবে autofocus।

তাই আমি বডি ট্যাগের বিপরীতে টাইপ করা প্রথম কীটি শুনেছিলাম এবং লক্ষ্য কী ইনপুট ক্ষেত্রে সেই কীটি পুনর্নির্দেশ করেছি। তারপরে জড়িত সমস্ত ইভেন্ট হ্যান্ডলারগুলি জিনিস পরিষ্কার রাখার জন্য নিহত হয়।

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/

— ক্রিস মোসচিনি
সূত্র

0

autofocusইনপুট উপাদানগুলিতে সেট করা সম্ভব

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">

— অস্কার ক্যাটেলন
সূত্র

-1

আপনি যদি এএসপি.এনইটি ব্যবহার করেন তবে আপনি ব্যবহার করতে পারেন

yourControlName.Focus()

সার্ভারের কোডে, যা পৃষ্ঠায় উপযুক্ত জাভাস্ক্রিপ্ট যুক্ত করবে।

অন্যান্য সার্ভার-সাইড ফ্রেমওয়ার্কগুলির একটি সমতুল্য পদ্ধতি থাকতে পারে।

— অ্যান্ড্রু মর্টন
সূত্র

-3

নীচের কোডটি ব্যবহার করুন। আমার জন্য এটি কাজ করছে

jQuery("[id$='hfSpecialty_ids']").focus()

— srikanth
সূত্র