Ustaw fokus myszy i przesuń kursor na koniec wprowadzania za pomocą jQuery

95

To pytanie zostało zadane w kilku różnych formatach, ale nie mogę uzyskać żadnej odpowiedzi, która zadziała w moim scenariuszu.

Używam jQuery do implementacji historii poleceń, gdy użytkownik uderza w strzałki w górę / w dół. Po naciśnięciu strzałki w górę zastępuję wartość wejściową poprzednim poleceniem i ustawiam fokus na polu wejściowym, ale chcę, aby kursor był zawsze umieszczony na końcu ciągu wejściowego.

Mój kod, jak jest:

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

Jak mogę wymusić umieszczenie kursora na końcu pola „input” po fokusie?

jerodsanto
źródło

Odpowiedzi:

145

Wygląda na to, że wyczyszczenie wartości po ustawieniu ostrości, a następnie zresetowanie działa.

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
skorpion9
źródło
4
To jedyne rozwiązanie, jakie udało mi się znaleźć, działające w różnych przeglądarkach. Uznanie dla Ciebie!
Meshaal
2
Działa to dobrze z FF i Chrome, ale nie w IE. Czy ktoś wie, jak rozwiązać ten problem w IE?
john Smith
1
Pamiętaj również, że możesz łączyć połączenia:var temp = input.focus().val(); input.val('').val(temp);
harpo
20
To może być jeszcze prostsze:input.focus().val(input.val());
Fateh Khalsa
2
Z contenteditablejakiegoś powodu nie wydaje się działać z elementami, może dlatego, że trzeba .html()raczej użyć niż.val()
jg2703
55

Wygląda to trochę dziwnie, a nawet głupio, ale to działa dla mnie:

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

Teraz nie jestem pewien, czy zreplikowałem twoją konfigurację. Zakładam, że inputto <input>element.

Po ponownym ustawieniu wartości (do siebie) myślę, że kursor jest umieszczany na końcu danych wejściowych. Przetestowano w Firefoksie 3 i MSIE7.

artlung
źródło
1
Tak, dane wejściowe to element <input>. Próbowałem tego i nie zadziałało w FF3 lub Safari 4
jerodsanto
Czy to ma jakieś aktualizacje? Pracował dla mnie. Zaktualizuj pytanie lub dodaj odpowiedź, jeśli znalazłeś rozwiązanie.
artlung
W FF15 ustawia to kursor na początku pola wprowadzania. Poza tym działa dobrze. Czy masz również rozwiązanie dla FF?
JochenJung,
@JochenJung Nie patrzyłem na to od 2009 roku - działało wtedy z FF3 i jQuery. Jeśli wymyślisz rozwiązanie wykorzystujące aktualne jQuery i FF15, nie krępuj się edytować tego posta.
artlung
45

Mam nadzieję, że to pomoże:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);
harsh4u
źródło
4
Działa dobrze, myślę, że jest to lepsze rozwiązanie niż resetowanie wartości, zwłaszcza gdy istnieje jakieś powiązanie widoku modelu.
morten.c
2
To jest właściwa odpowiedź, ustawiając dokładnie to, co chcesz ustawić, bez pomijania tego.
Dan Barron
14

Chris Coyier ma do tego wtyczkę mini jQuery, która działa doskonale: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Używa setSelectionRange, jeśli jest obsługiwana, w przeciwnym razie ma solidną rezerwę.

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

Następnie możesz po prostu zrobić:

input.putCursorAtEnd();
jackocnr
źródło
Niesamowite dzięki, jedyne rozwiązanie, które znalazłem w 2020 roku, które wydaje się działać niezawodnie.
AdamJones
12

A co w jednej linii ...

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

Ta linia działa dla mnie.

Chris Rosete
źródło
Dzięki Mad za komentarz
Chris Rosete
8

2 odpowiedź artlunga : Działa tylko z drugą linią w moim kodzie (IE7, IE8; Jquery v1.6):

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

Dodanie: jeśli element wejściowy został dodany do DOM za pomocą JQuery, fokus nie jest ustawiony w IE. Użyłem małej sztuczki:

input.blur().focus().val(input.val());
SergO
źródło
1
Ten rodzaj zadziałał dla mnie, ale musiałem zrobić coś takiego: var input = $ ("# inputID"); tmp = input.val (); input.focus (). val (""). blur (). focus (). val (tmp);
will824
@ will824 Twoje rozwiązanie komentarzy zadziałało dla mnie. Wysyłam to jako odpowiedź.
Aamir Shahzad
8

Ref: @ will824 Komentarz, To rozwiązanie działało dla mnie bez problemów ze zgodnością. Pozostałe rozwiązania zawiodły w IE9.

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

Przetestowane i uznane za działające w:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9
Aamir Shahzad
źródło
6

Wiem, że ta odpowiedź przychodzi późno, ale widzę, że ludzie nie znaleźli odpowiedzi. Aby klawisz w górę nie umieszczał kursora na początku, tylko return falsez metody obsługującej zdarzenie. To zatrzymuje łańcuch zdarzeń prowadzący do ruchu kursora. Wklejanie poprawionego kodu z OP poniżej:

$(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
pederOverland
źródło
1
Możesz zredukować drugą linię dovar key = e.charCode || e.keyCode || 0;
Gone Coding
6

Używam kodu poniżej i działa dobrze

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();
                }
            }
        }
Tomas
źródło
6

Będzie inaczej dla różnych przeglądarek:

Działa to w 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();

Więcej szczegółów w tych artykułach tutaj na SitePoint , AspAlliance .

TheVillageIdiot
źródło
4

jak powiedzieli inni, wyczyść i wypełnij zadziałało dla mnie:

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);
Fabrizio
źródło
3

ustaw wartość jako pierwszą. następnie ustaw ostrość. kiedy się skupi, użyje wartości istniejącej w momencie skupienia, więc twoja wartość musi być ustawiona jako pierwsza.

ta logika działa dla mnie z aplikacją, która zapełnia an <input>wartością kliknięcia <button>. val()jest ustawiony jako pierwszy. następniefocus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});
gorillagoat
źródło
Możesz uczynić to prostszym jedną linijką zamiast dwóch:$('input[name=item1]').val(value).focus();
inMILD
2

Znalazłem to samo, co sugerowało powyżej kilka osób. Jeśli focus()najpierw wepchniesz val()do wejścia, kursor zostanie umieszczony na końcu wartości wejściowej w przeglądarkach Firefox, Chrome i IE. Jeśli najpierw wepchniesz val()do pola wprowadzania, Firefox i Chrome ustawią kursor na końcu, ale IE przesunie go do przodu focus().

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

powinien załatwić sprawę (i tak zawsze ma dla mnie).

Travis Beatty
źródło
2

Najpierw musisz ustawić fokus na wybranym obiekcie tekstowym, a następnie ustawić wartość.

$('#inputID').focus();
$('#inputID').val('someValue')
hladas
źródło
1
Próbowałem tego, ale nie działa. Czy działa to również w przypadku, gdy edytowalna zawartość div jest ustawiona na true?
Rupam Datta
1
    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'));

działa dla wszystkich, tj. przeglądarek.

madhu
źródło
1

Oto kolejny, jeden wkład, który nie zmienia przypisania wartości:

$("#inp").focus()[0].setSelectionRange(99999, 99999);
Chong Lip Phang
źródło
0
function CurFocus()
{
    $('.txtEmail').focus(); 
}

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

window.onload = pageLoad;
abbijohn
źródło
0

Odpowiedź od scorpion9 działa. Żeby było jaśniej, zobacz mój kod poniżej,

<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>
Diganta Kumar
źródło
-3

Skupi się za pomocą punktu myszy

$ ("# TextBox"). Focus ();

Pergin Sheni
źródło