Frage Setzen Sie den Mausfokus und bewegen Sie den Cursor mit jQuery zum Ende der Eingabe


Diese Frage wurde in einigen verschiedenen Formaten gestellt, aber ich kann keine der Antworten in meinem Szenario finden.

Ich benutze jQuery, um den Befehlsverlauf zu implementieren, wenn der Benutzer Pfeile nach oben / unten drückt. Wenn der Pfeil nach oben gedrückt wird, ersetze ich den Eingabewert durch den vorherigen Befehl und setze den Fokus auf das Eingabefeld, möchte aber, dass der Cursor immer am Ende der Eingabezeichenfolge positioniert wird.

Mein Code, wie es ist:

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

Wie kann ich den Cursor am Ende von "Eingabe" nach dem Fokus platzieren?


75
2018-06-29 02:39


Ursprung


Antworten:


Sieht so aus, als würde man den Wert nach dem Fokussieren und dem anschließenden Zurücksetzen löschen.

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

124
2017-12-25 22:30



Es sieht etwas komisch aus, sogar albern, aber das funktioniert für mich:

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

Jetzt bin ich mir nicht sicher, ob ich dein Setup repliziert habe. Ich gehe davon aus input ist ein <input> Element.

Wenn ich den Wert (auf sich selbst) zurücksetze, denke ich, dass der Cursor am Ende der Eingabe steht. Getestet in Firefox 3 und MSIE7.


51
2018-06-29 03:08



Hoffe das hilft dir:

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

19
2018-04-24 06:26



2 ArtlungAntwort: Es funktioniert mit der zweiten Zeile nur in meinem Code (IE7, IE8; Jquery v1.6):

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

Zusatz: ob Eingang Element wurde mit JQuery zu DOM hinzugefügt, ein Fokus wird nicht in IE festgelegt. Ich habe einen kleinen Trick benutzt:

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

7
2017-07-14 09:11



Chris Coyier hat dafür ein Mini-jQuery-Plugin, das sehr gut funktioniert: http://css-tricks.com/snippets/jquery/move-curs-to-end-of-textarea-or-input/

Es benutzt setSelectionRange Falls unterstützt, hat else einen soliden Rückfall.

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

Dann kannst du einfach tun:

input.putCursorAtEnd();

7
2018-02-21 04:47



Was ist mit einer einzigen Linie ...

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

Diese Linie funktioniert für mich.


7
2017-11-05 16:13



Ich weiß, dass diese Antwort spät kommt, aber ich kann sehen, dass die Leute keine Antwort gefunden haben. Um zu verhindern, dass die Nach-oben-Taste den Cursor an den Anfang setzt, einfach return false von der Methode, die das Ereignis behandelt. Dies stoppt die Ereigniskette, die zur Cursorbewegung führt. Überarbeiteten Code aus dem OP einfügen:

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

5
2017-09-09 12:02



Ich benutze Code unten und es funktioniert gut

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

5
2018-03-29 11:47



Ref: @ will824 Kommentar, Diese Lösung funktionierte für mich ohne Kompatibilitätsprobleme. Die restlichen Lösungen sind in IE9 fehlgeschlagen.

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

Getestet und gefunden in:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

5
2017-09-19 06:28