JQuery का उपयोग करके माउस फ़ोकस सेट करें और कर्सर को इनपुट के अंत तक ले जाएँ

Question

यह सवाल कुछ अलग प्रारूपों में पूछा गया है, लेकिन मुझे अपने परिदृश्य में काम करने का कोई जवाब नहीं मिल सकता है।

जब उपयोगकर्ता ऊपर / नीचे तीर मारता है तो मैं कमांड इतिहास को लागू करने के लिए jQuery का उपयोग कर रहा हूं। जब ऊपर तीर मारा जाता है, तो मैं इनपुट मान को पिछली कमांड से बदल देता हूं और इनपुट क्षेत्र पर ध्यान केंद्रित करता हूं, लेकिन चाहता हूं कि कर्सर हमेशा इनपुट स्ट्रिंग के अंत में तैनात हो।

मेरा कोड, जैसा है:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
// and it continues on from there

फोकस के बाद मैं कर्सर को 'इनपुट' के अंत में रखने के लिए कैसे मजबूर कर सकता हूं?

Answer 1

ध्यान केंद्रित करने और फिर रीसेट करने के बाद मूल्य को साफ करने जैसा दिखता है।

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

Comments

यह एकमात्र समाधान है जो मैंने पाया है कि क्रॉस-ब्राउज़र काम करता है। आप के लिए यश!

— मेशाल

यह FF और क्रोम के साथ ठीक काम करता है, लेकिन IE में नहीं .. किसी को भी पता है कि IE में इस मुद्दे को कैसे हल किया जाए?

— जॉन स्मिथ

ध्यान दें कि आप कॉल को चेन कर सकते हैं:var temp = input.focus().val(); input.val('').val(temp);

— harp

यह और भी सरल हो सकता है:input.focus().val(input.val());

— फतेह खालसा

किसी contenteditableकारण से तत्वों के साथ काम करने के लिए प्रतीत नहीं होता है , हो सकता है कि किसी को .html()इसके बजाय उपयोग करना है.val()

— jg2703

Answer 2

यह थोड़ा अजीब लगता है, मूर्खतापूर्ण भी, लेकिन यह मेरे लिए काम कर रहा है:

input.val(lastQuery);
input.focus().val(input.val());

अब, मुझे यकीन नहीं है कि मैंने आपका सेटअप दोहराया है। मैं मान रहा हूं कि inputएक <input>तत्व है।

मान को फिर से सेट करके (मुझे खुद से) लगता है कि इनपुट के अंत में कर्सर डाला जा रहा है। फ़ायरफ़ॉक्स 3 और MSIE7 में परीक्षण किया गया।

Comments

हां, इनपुट एक <input> तत्व है। मैंने यह कोशिश की और यह FF3 या सफ़ारी 4

— jerodsanto

इस पर किसी भी अद्यतन? मेरे लिए काम किया। यदि आपको कोई हल मिला है तो प्रश्न को अपडेट करें या उत्तर जोड़ें।

— आर्टलंग 22

FF15 में यह कर्सर को इनपुट फील्ड की शुरुआत में सेट करता है। इसके अलावा यह ठीक काम कर रहा है। क्या आपके पास एफएफ के लिए भी एक समाधान है?

— जोहानजंग

@ जोचेनजंग मैंने 2009 से इस पर ध्यान नहीं दिया है - फिर इसने FF3 और jQuery के साथ काम किया। यदि आप वर्तमान jQuery और FF15 का उपयोग कर समाधान के साथ आते हैं, तो कृपया इस पोस्ट को संपादित करने के लिए स्वतंत्र महसूस करें।

— आर्टलंग

Answer 3

आशा है कि यह आपकी मदद करेगा:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

Comments

ठीक काम करता है, मुझे लगता है कि यह मूल्य को रीसेट करने से बेहतर समाधान है, खासकर जब किसी तरह का मॉडल-व्यू-बाइंडिंग होता है।

— मोर्टन। सी। सी।

यह सही उत्तर है, इसे ठीक से सेट करें जिसे आप बिना इसे काटे सेट करना चाहते हैं।

— डैन बैरन

Answer 4

क्रिस कॉयियर के पास इसके लिए एक मिनी jQuery प्लगइन है जो पूरी तरह से अच्छी तरह से काम करता है: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

यदि यह समर्थित है तो setSelectionRange का उपयोग करता है , और एक ठोस वापसी है ।

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    $(this).focus()
    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)
      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;
      this.setSelectionRange(len, len);
    } else {
      // ... otherwise replace the contents with itself
      // (Doesn't work in Google Chrome)
      $(this).val($(this).val());
    }
    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;
  });
};

तो आप बस कर सकते हैं:

input.putCursorAtEnd();

Comments

कमाल का धन्यवाद, केवल समाधान मैंने पाया है 2020 आया जो मज़बूती से काम करता है।

— एडमजोन

Answer 5

एक लाइन में क्या ...

$('#txtSample').focus().val($('#txtSample').val());

यह लाइन मेरे लिए काम करती है।

Comments

टिप्पणी के लिए धन्यवाद पागल

— क्रिस रोसेट

Answer 6

2 आर्टलुंग का उत्तर: यह केवल मेरे कोड (IE7, IE8; Jquery v1.6) में दूसरी पंक्ति के साथ काम करता है:

var input = $('#some_elem');
input.focus().val(input.val());

जोड़: यदि इनपुट तत्व को JQuery का उपयोग करके DOM में जोड़ा गया था, तो IE में फ़ोकस सेट नहीं किया गया है। मैंने थोड़ी तरकीब इस्तेमाल की:

input.blur().focus().val(input.val());

Comments

मेरे लिए इस तरह का काम किया गया था, लेकिन मुझे कुछ ऐसा करना था: var input = $ ("# inputID"); tmp = input.val (); input.focus () वैल ( "") कलंक () फोकस () वैल (TMP)।।।।

— २०२४

@ will824 आपके टिप्पणियों के समाधान ने मेरे लिए काम किया। मैं इसे उत्तर के रूप में पोस्ट कर रहा हूं।

— आमिर शहजाद

Answer 7

Ref: @ will824 टिप्पणी करें, इस समाधान ने मेरे लिए बिना किसी अनुकूलता के मुद्दों के साथ काम किया। IE9 में बाकी समाधान विफल रहे।

var input = $("#inputID");
var tmp = input.val();
input.focus().val("").blur().focus().val(tmp);

परीक्षण किया और पाया गया:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Answer 8

मुझे पता है कि यह उत्तर देर से आता है, लेकिन मैं देख सकता हूं कि लोगों ने एक उत्तर पाया। कर्सर को प्रारंभ में रखने के लिए अप की को रोकने के लिए, केवल return falseईवेंट को हैंडल करने की विधि से। यह इवेंट चेन को रोकता है जो कर्सर के मूवमेंट की ओर जाता है। नीचे दिए गए ओपी से संशोधित संशोधित कोड:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
      // HERE IS THE FIX:
      return false; 
// and it continues on from there

Comments

आप दूसरी पंक्ति को कम कर सकते हैंvar key = e.charCode || e.keyCode || 0;

— कोडिंग

Answer 9

मैं नीचे दिए गए कोड का उपयोग करता हूं और यह ठीक काम करता है

function to_end(el) {
            var len = el.value.length || 0;
            if (len) {
                if ('setSelectionRange' in el) el.setSelectionRange(len, len);
                else if ('createTextRange' in el) {// for IE
                    var range = el.createTextRange();
                    range.moveStart('character', len);
                    range.select();
                }
            }
        }

Answer 10

यह विभिन्न ब्राउज़रों के लिए अलग होगा:

यह एफएफ में काम करता है:

    var t =$("#INPUT");
    var l=$("#INPUT").val().length;
    $(t).focus();

    var r = $("#INPUT").get(0).createTextRange();
    r.moveStart("character", l); 
    r.moveEnd("character", l);      
    r.select();

अधिक जानकारी इन लेखों में यहाँ पर हैं SitePoint , AspAlliance ।

Answer 11

अन्य लोगों की तरह, स्पष्ट और मेरे लिए काम भरा:

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);

Answer 12

पहले मान सेट करें। फिर फोकस सेट करें। जब यह ध्यान केंद्रित करता है, तो यह फोकस के समय मौजूद मूल्य का उपयोग करेगा, इसलिए पहले आपका मूल्य निर्धारित किया जाना चाहिए।

यह तर्क मेरे लिए एक ऐसे एप्लिकेशन के साथ काम करता <input>है जो क्लिक किए गए मूल्य के साथ पॉप्युलेट करता है <button>। val()पहले सेट किया गया है। फिरfocus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});

Comments

U इसे दो के बजाय और सरल बना सकता है:$('input[name=item1]').val(value).focus();

— inMILD

Answer 13

मुझे कुछ लोगों द्वारा सुझाए गए अनुसार वही मिला है। यदि आप focus()पहले करते हैं, तो val()इनपुट में धक्का दें , कर्सर फ़ायरफ़ॉक्स, क्रोम और IE में इनपुट मूल्य के अंत तक तैनात हो जाएगा। यदि आप val()इनपुट क्षेत्र में सबसे पहले पुश करते हैं , तो फ़ायरफ़ॉक्स और क्रोम अंत में कर्सर को स्थिति में लाते हैं, लेकिन IE आपके सामने आने पर इसे स्थिति में ला देता है focus()।

$('element_identifier').focus().val('some_value') 

चाल करना चाहिए (यह हमेशा मेरे लिए वैसे भी है)।

Answer 14

पहले आपको चयनित टेक्स्टबॉक्स ऑब्जेक्ट पर ध्यान केंद्रित करना होगा और इसके बाद आप मान सेट करेंगे।

$('#inputID').focus();
$('#inputID').val('someValue')

Comments

मैं यह कोशिश की, लेकिन काम नहीं करता है। क्या यह आपके लिए एक div कंटेंट संपादन योग्य सेट के साथ भी काम करता है?

— रूपम दत्ता

Answer 15

    function focusCampo(id){
        var inputField = document.getElementById(id);
        if (inputField != null && inputField.value.length != 0){
            if (inputField.createTextRange){
                var FieldRange = inputField.createTextRange();
                FieldRange.moveStart('character',inputField.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }else if (inputField.selectionStart || inputField.selectionStart == '0') {
                var elemLen = inputField.value.length;
                inputField.selectionStart = elemLen;
                inputField.selectionEnd = elemLen;
                inputField.focus();
            }
        }else{
            inputField.focus();
        }
    }

$('#urlCompany').focus(focusCampo('urlCompany'));

सभी ब्राउज़रों के लिए काम करता है ..

Answer 16

यहां एक और एक, एक लाइनर है जो मूल्य को पुन: असाइन नहीं करता है:

$("#inp").focus()[0].setSelectionRange(99999, 99999);

Answer 17

function CurFocus()
{
    $('.txtEmail').focus(); 
}

function pageLoad()
{
   setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;

Answer 18

Scorpion9 काम करता है से जवाब। बस इसे और अधिक स्पष्ट करने के लिए नीचे मेरा कोड देखें,

<script src="~/js/jquery.js"></script> 
<script type="text/javascript">
    $(function () {
        var input = $("#SomeId");
        input.focus();
        var tmpStr = input.val();
        input.val('');
        input.val(tmpStr);
    });
</script>

Answer 19

यह माउस पॉइंट के साथ केंद्रित होगा

$ ( "# पाठ बॉक्स") फोकस ()।;