JQuery kullanarak fare odağını ayarlayın ve imleci girişin sonuna taşıyın

Bu soru birkaç farklı biçimde soruldu ancak senaryomda işe yarayacak yanıtların hiçbirini alamıyorum.

Kullanıcı yukarı / aşağı oklara bastığında komut geçmişini uygulamak için jQuery kullanıyorum. Yukarı ok tuşuna basıldığında, giriş değerini önceki komutla değiştiriyorum ve odağı giriş alanına ayarlıyorum, ancak imlecin her zaman giriş dizesinin sonunda konumlandırılmasını istiyorum.

Kodum olduğu gibi:

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

İmleci odaklamadan sonra 'giriş'in sonuna nasıl yerleştirebilirim?

Odaklandıktan sonra değeri temizlemek ve ardından işleri sıfırlamak gibi görünüyor.

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

Biraz tuhaf görünüyor, hatta aptalca, ama bu benim için çalışıyor:

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

Şimdi, kurulumunuzu kopyaladığımdan emin değilim. inputBir <input>unsur olduğunu varsayıyorum .

Değeri (kendisine) yeniden ayarlayarak, imlecin girdinin sonuna yerleştirildiğini düşünüyorum. Firefox 3 ve MSIE7'de test edilmiştir.

Umarım bu size yardımcı olur:

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

Chris Coyier'in bunun için mükemmel çalışan bir mini jQuery eklentisi var: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Destekleniyorsa setSelectionRange kullanır , aksi takdirde sağlam bir yedeği vardır.

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

O zaman şunları yapabilirsiniz:

input.putCursorAtEnd();

Peki ya tek bir satırda ...

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

Bu çizgi benim için çalışıyor.

2 artlung'un cevabı: Kodumda yalnızca ikinci satırla çalışır (IE7, IE8; Jquery v1.6):

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

Ekleme: eğer giriş elemanı JQuery kullanarak DOM eklendi, bir odak IE ayarlanmamış. Küçük bir numara kullandım:

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

Ref: @ will824 Yorum, Bu çözüm benim için hiçbir uyumluluk sorunu olmadan çalıştı. IE9'da geri kalan çözümler başarısız oldu.

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

Test edildi ve çalıştığı bulundu:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Bu cevabın geç geldiğini biliyorum ama insanların bir cevap bulamadığını görebiliyorum. Yukarı tuşunun imleci başlangıca getirmesini önlemek için, sadece return falseolayı işleyen yöntemden. Bu, imleç hareketine yol açan olay zincirini durdurur. Aşağıdaki OP'den revize edilmiş kodu yapıştırmak:

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

Aşağıdaki kodu kullanıyorum ve iyi çalışıyor

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

Farklı tarayıcılar için farklı olacaktır:

Bu ff'de çalışır:

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

Bu makalelerde daha fazla ayrıntı burada SitePoint , AspAlliance'ta bulunmaktadır .

diğerlerinin dediği gibi, temizle ve doldur benim için çalıştı:

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

önce değeri ayarlayın. ardından odağı ayarlayın. odaklandığında, odaklanma anında var olan değeri kullanacaktır, bu nedenle önce değerinizin ayarlanması gerekir.

bu mantık <input>, bir tıklanan değeri ile dolduran bir uygulamayla benim için çalışıyor <button>. val()önce ayarlanır. sonrafocus()

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

Yukarıda birkaç kişi tarafından önerilen aynı şeyi buldum. Eğer varsa focus(), sonra itme val()girişine, imleç Firefox, Chrome ve IE giriş değerinin sonuna yerleştirilmiş alacak. Eğer itmek ise val()zaman ön, Firefox ve Chrome pozisyon sonunda imleç, ancak IE pozisyonları bunu ilk giriş alanına focus().

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

hile yapmalı (zaten benim için her zaman var).

İlk önce odağı seçilen metin kutusu nesnesine ayarlamanız ve ardından değeri ayarlamanız gerekir.

$('#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'));

tüm ie tarayıcılar için çalışır ..

İşte başka bir tane, değeri yeniden atamayan bir satır:

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

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

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

window.onload = pageLoad;

Scorpion9'un cevabı işe yarıyor. Daha net hale getirmek için aşağıdaki koduma bakın,

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

Fare noktasıyla odaklanacak

$ ("# Metin Kutusu"). Odak ();