फोकस इनपुट बॉक्स लोड पर


95

पृष्ठ लोड पर एक विशिष्ट इनपुट बॉक्स पर कर्सर को कैसे केंद्रित किया जा सकता है?

क्या यह प्रारंभिक पाठ मान को बनाए रखने और इनपुट के अंत में कर्सर रखने के लिए पॉसिबल है?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

जवाबों:


170

आपके प्रश्न के दो भाग हैं।

1) पेज लोड पर इनपुट कैसे केंद्रित करें?

आप autofocusइनपुट में केवल विशेषता जोड़ सकते हैं ।

<input id="myinputbox" type="text" autofocus>

हालाँकि, यह सभी ब्राउज़रों में समर्थित नहीं हो सकता है, इसलिए हम जावास्क्रिप्ट का उपयोग कर सकते हैं।

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2) इनपुट टेक्स्ट के अंत में कर्सर कैसे रखें?

यहाँ एक गैर- jQuery समाधान है तो दूसरे SO उत्तर से कुछ उधार कोड के साथ ।

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

यहाँ एक उदाहरण है कि मैं इसे jQuery के साथ कैसे पूरा करूँगा।

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>

3
सुझाया गया पहला कोड ब्लॉक वास्तव में मौजूदा मान के अंत में कर्सर रखता है, यह अच्छा काम करता है। मैं आपकी मदद करता हूं।
कोडेक्स 73३

46

बस एक सिर - आप इसे समर्थन करने वाले ब्राउज़र के लिए जावास्क्रिप्ट के बिना HTML5 के साथ अब कर सकते हैं:

<input type="text" autofocus>

आप संभवतः इसके साथ शुरुआत करना चाहते हैं और पुराने ब्राउज़रों के लिए एक कमबैक प्रदान करने के लिए इसे जावास्क्रिप्ट के साथ बनाना चाहते हैं।


यह जानकर अच्छा लगा कि, क्या यह पहले से ही इनपुट क्षेत्र में कर्सर को अंतिम स्थिति में ले जाता है?
कैमिलो डिआज रेपका

1
मुझे नहीं लगता कि @ Codex73 एचटीएमएल 5 में प्लेसहोल्डर विशेषता को पूरा करने की कोशिश कर रहा है। ऐसा लगता है कि वह चाहता है कि वर्तमान में इनपुट में जो भी मूल्य है उसके अंत में कर्सर को स्वचालित रूप से तैनात किया जाए।
जेसेगैविन

2
आप सही हैं, यह पूर्ण समाधान नहीं है। लेकिन यह कुछ चीजों (ऑनलोड ऑटोफोकस और प्लेसहोल्डर टेक्स्ट) को हल करता है।
डेविड कैलहॉन 3

ध्यान दें कि 1/2019 के अनुसार, iOS पर Safari इसका समर्थन नहीं करता है: caniuse.com/#feat=autofocus
sporker


3
function focusOnMyInputBox(){                                 
    document.getElementById("myinputbox").focus();
}

<body onLoad="focusOnMyInputBox();">

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">

2

ऐसा करने का एक पोर्टेबल तरीका की तरह (संभाल ब्राउज़र मतभेद के) एक कस्टम समारोह उपयोग कर रहा है यह एक

फिर onloadअपने <body>टैग के अंत में हैंडलर सेटअप करें , जैसा कि जेसगेविन ने लिखा है:

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


1

बहुत सरल एक लाइन समाधान:

<body onLoad="document.getElementById('myinputbox').focus();">

0

यह मेरे लिए ठीक काम करता है:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff एक वैश्विक वैरिएबल होगा जिसका नाम बिलकुल अप्रासंगिक है और जिसका उद्देश्य उस इनपुट में फ़ोकस करने के लिए जेनेरिक ऑनलोड घटना को रोकना होगा।

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

प्रेषक: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html


0

यदि आप किसी कारण के लिए बॉडी टैग में नहीं जोड़ सकते हैं, तो आप इस फॉर्म को जोड़ सकते हैं:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>

0

प्रयत्न:

जावास्क्रिप्ट शुद्ध:

[elem][n].style.visibility='visible';
[elem][n].focus();

jQuery:

[elem].filter(':visible').focus();

0

इसे अपने js के शीर्ष पर जोड़ें

var input = $('#myinputbox');

input.focus();

या html को

<script>
    var input = $('#myinputbox');

    input.focus();
</script>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.