ตั้งค่าโฟกัสของเมาส์และเลื่อนเคอร์เซอร์ไปที่จุดสิ้นสุดของอินพุตโดยใช้ jQuery

คำถามนี้ถูกถามในรูปแบบที่แตกต่างกันสองสามรูปแบบ แต่ฉันไม่สามารถหาคำตอบใด ๆ ในสถานการณ์ของฉัน

ฉันใช้ 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

ฉันจะบังคับให้วางเคอร์เซอร์ไว้ที่ส่วนท้ายของ 'input' หลังโฟกัสได้อย่างไร?

ดูเหมือนว่าการล้างค่าหลังจากโฟกัสแล้วรีเซ็ตได้ผล

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

มันดูแปลก ๆ แม้จะโง่ แต่ก็ใช้ได้ผลสำหรับฉัน:

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

ตอนนี้ฉันไม่แน่ใจว่าได้จำลองการตั้งค่าของคุณแล้ว ฉันสมมติว่าinputเป็น<input>องค์ประกอบ

ด้วยการตั้งค่าใหม่ (ให้ตัวเอง) ฉันคิดว่าเคอร์เซอร์จะถูกวางไว้ที่ส่วนท้ายของอินพุต ทดสอบใน Firefox 3 และ MSIE7

หวังว่านี่จะช่วยคุณได้:

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

Chris Coyier มีปลั๊กอิน 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();

แล้วในบรรทัดเดียว ...

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

สายนี้ใช้ได้กับฉัน

2 คำตอบของartlung : ใช้ได้กับบรรทัดที่สองในโค้ดของฉันเท่านั้น (IE7, IE8; Jquery v1.6):

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

การเพิ่ม:หากองค์ประกอบอินพุตถูกเพิ่มไปยัง DOM โดยใช้ JQuery โฟกัสจะไม่ถูกกำหนดใน IE ฉันใช้เคล็ดลับเล็กน้อย:

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

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

ฉันรู้ว่าคำตอบนี้มาช้า แต่ฉันเห็นว่ามีคนไม่พบคำตอบ เพื่อป้องกันไม่ให้คีย์ขึ้นวางเคอร์เซอร์ไว้ที่จุดเริ่มต้นเพียงreturn falseจากวิธีการจัดการเหตุการณ์ สิ่งนี้จะหยุดห่วงโซ่เหตุการณ์ที่นำไปสู่การเคลื่อนที่ของเคอร์เซอร์ วางโค้ดที่แก้ไขแล้วจาก OP ด้านล่าง:

$(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

ฉันใช้รหัสด้านล่างและใช้งานได้ดี

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();
                }
            }
        }

เบราว์เซอร์ที่แตกต่างกันจะแตกต่างกัน:

สิ่งนี้ใช้ได้ใน ff:

    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

อย่างที่คนอื่นพูดชัดเจนและเติมได้ผลสำหรับฉัน:

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

กำหนดค่าก่อน จากนั้นตั้งโฟกัส เมื่อโฟกัสมันจะใช้ค่าที่มีอยู่ในขณะโฟกัสดังนั้นต้องกำหนดค่าของคุณก่อน

ตรรกะนี้ผลงานของเราด้วยโปรแกรมที่ populates เป็นนักการที่มีค่าของคลิก<input> ถูกตั้งค่าก่อน แล้ว<button>val()focus()

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

ฉันได้พบสิ่งเดียวกันกับที่แนะนำไว้ข้างต้นโดยคนสองสามคน หากคุณfocus()ก่อนอื่นจากนั้นดันval()เข้าไปในอินพุตเคอร์เซอร์จะอยู่ในตำแหน่งที่สิ้นสุดของค่าอินพุตใน Firefox, Chrome และ IE ถ้าคุณผลักดันval()เข้าไปในช่องใส่ครั้งแรก Firefox และ Chrome ตำแหน่งเคอร์เซอร์ที่สิ้นสุด แต่ IE focus()ตำแหน่งมันไปข้างหน้าเมื่อคุณ

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

ควรทำเคล็ดลับ (มันมักจะมีสำหรับฉันอยู่แล้ว)

ในตอนแรกคุณต้องตั้งค่าโฟกัสที่วัตถุกล่องข้อความที่เลือกและถัดไปคุณตั้งค่า

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

    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'));

ใช้ได้กับทุกเบราว์เซอร์เช่น ..

นี่คืออีกอันหนึ่งซับหนึ่งซึ่งไม่ได้กำหนดค่าใหม่:

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

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

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

window.onload = pageLoad;

คำตอบจาก 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>

มันจะโฟกัสด้วยจุดเมาส์

$ ("# กล่องข้อความ"). focus ();