Stellen Sie den Mausfokus ein und bewegen Sie den Cursor mit jQuery zum Ende der Eingabe

94

Diese Frage wurde in verschiedenen Formaten gestellt, aber ich kann keine der Antworten erhalten, die in meinem Szenario funktionieren.

Ich verwende jQuery, um den Befehlsverlauf zu implementieren, wenn der Benutzer die Aufwärts- / Abwärtspfeile drückt. Wenn der Aufwärtspfeil 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 er 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 erzwingen, dass der Cursor nach dem Fokussieren am Ende der Eingabe platziert wird?

Jerodsanto
quelle

Antworten:

141

Es sieht so aus, als würde der Wert nach dem Fokussieren gelöscht und dann zurückgesetzt.

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
Skorpion9
quelle
4
Dies ist die einzige Lösung, die ich gefunden habe und die browserübergreifend funktioniert. Hut ab!
Meshaal
2
Dies funktioniert gut mit FF und Chrome, aber nicht im IE. Weiß jemand, wie man dieses Problem im IE löst?
John Smith
1
Beachten Sie auch, dass Sie die Anrufe var temp = input.focus().val(); input.val('').val(temp);
verketten
20
Dies kann noch einfacher werden:input.focus().val(input.val());
Fateh Khalsa
2
contenteditable.html().val()
Scheint
55

Es sieht ein bisschen seltsam aus, sogar albern, aber das funktioniert bei mir:

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

Ich bin mir nicht sicher, ob ich Ihr Setup repliziert habe. Ich nehme an, inputist ein<input> Element handelt.

Durch Zurücksetzen des Wertes (auf sich selbst) wird der Cursor meiner Meinung nach am Ende der Eingabe gesetzt. Getestet in Firefox 3 und MSIE7.

artlung
quelle
1
Ja, Eingabe ist ein <Eingabe> -Element. Ich habe es versucht und es hat in FF3 oder Safari 4 nicht funktioniert
jerodsanto
Gibt es hierzu Neuigkeiten? Hat für mich gearbeitet. Aktualisieren Sie die Frage oder fügen Sie eine Antwort hinzu, wenn Sie eine Lösung gefunden haben.
Artlung
In FF15 setzt dies den Cursor auf den Anfang des Eingabefeldes. Davon abgesehen funktioniert es gut. Haben Sie auch eine Lösung für FF?
JochenJung
@JochenJung Ich habe mir das seit 2009 nicht mehr angesehen - es hat dann mit FF3 und jQuery funktioniert. Wenn Sie eine Lösung mit aktuellem jQuery und FF15 finden, können Sie diesen Beitrag jederzeit bearbeiten.
Artlung
44

Hoffe das hilft dir:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);
harsch4u
quelle
4
Funktioniert gut, ich denke, dies ist eine bessere Lösung als das Zurücksetzen des Werts, insbesondere wenn es eine Art Modellansichtsbindung gibt.
morten.c
2
Dies ist die richtige Antwort, indem Sie genau das einstellen, was Sie einstellen möchten, ohne es zu verfälschen.
Dan Barron
14

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

Es verwendet setSelectionRange, wenn es unterstützt wird, andernfalls gibt es einen soliden Fallback.

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 können Sie einfach tun:

input.putCursorAtEnd();
jackocnr
quelle
Erstaunlich danke, ich habe bis 2020 nur eine Lösung gefunden, die zuverlässig zu funktionieren scheint.
AdamJones
12

Was ist mit einer einzigen Zeile ...

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

Diese Linie funktioniert bei mir.

Chris Rosete
quelle
Danke Mad für den Kommentar
Chris Rosete
8

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

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

Hinzufügung: Wenn das Eingabeelement mithilfe von JQuery zum DOM hinzugefügt wurde, wird im IE kein Fokus festgelegt. Ich habe einen kleinen Trick benutzt:

input.blur().focus().val(input.val());
SergO
quelle
1
Diese Art funktionierte für mich, aber ich musste etwas tun wie: var input = $ ("# inputID"); tmp = input.val (); input.focus (). val (""). blur (). focus (). val (tmp);
Will824
@ will824 Ihre Kommentarlösung hat bei mir funktioniert. Ich poste es als Antwort.
Aamir Shahzad
8

Ref: @ will824 Kommentar, Diese Lösung hat bei mir ohne Kompatibilitätsprobleme funktioniert. Die restlichen Lösungen sind in IE9 fehlgeschlagen.

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

Getestet und gefunden in:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9
Aamir Shahzad
quelle
6

Ich weiß, dass diese Antwort zu spät kommt, aber ich kann sehen, dass die Leute keine Antwort gefunden haben. Um zu verhindern, dass die Aufwärts-Taste den Cursor an den Start setzt, nur return falsevon der Methode, die das Ereignis behandelt. Dies stoppt die Ereigniskette, die zur Cursorbewegung führt. Einfügen von überarbeitetem Code aus dem OP unten:

$(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
quelle
1
Sie können die zweite Zeile aufvar key = e.charCode || e.keyCode || 0;
Gone Coding
6

Ich benutze den folgenden Code 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();
                }
            }
        }
Tomas
quelle
6

Es wird für verschiedene Browser unterschiedlich sein:

Dies funktioniert in 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();

Weitere Details finden Sie in diesen Artikeln hier bei SitePoint , AspAlliance .

TheVillageIdiot
quelle
3

Wie andere sagten, klar und voll für mich gearbeitet:

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

Stellen Sie zuerst den Wert ein. Stellen Sie dann den Fokus ein. Wenn es fokussiert, wird der Wert verwendet, der zum Zeitpunkt des Fokus vorhanden ist. Daher muss Ihr Wert zuerst festgelegt werden.

Diese Logik funktioniert für mich mit einer Anwendung, die eine <input>mit dem Wert eines angeklickten füllt <button>. val()wird zuerst eingestellt. dannfocus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});
Gorillagoat
quelle
Sie können es einfacher machen, eine Zeile statt zwei:$('input[name=item1]').val(value).focus();
inMILD
2

Ich habe das Gleiche gefunden, wie es oben von einigen Leuten vorgeschlagen wurde. Wenn Sie focus()zuerst den val()in die Eingabe drücken , wird der Cursor in Firefox, Chrome und IE am Ende des Eingabewerts positioniert. Wenn Sie den zuerst val()in das Eingabefeld drücken , positionieren Firefox und Chrome den Cursor am Ende, aber der IE positioniert ihn nach vorne, wenn Sie focus().

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

sollte den Trick machen (es hat sowieso immer für mich).

Travis Beatty
quelle
2

Zuerst müssen Sie den Fokus auf das ausgewählte Textfeldobjekt legen und als nächstes den Wert festlegen.

$('#inputID').focus();
$('#inputID').val('someValue')
hladas
quelle
1
Ich habe es versucht, aber es funktioniert nicht. Funktioniert es auch für Sie, wenn ein div-Inhalt auf true gesetzt werden kann?
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'));

funktioniert für alle dh Browser.

Madhu
quelle
1

Hier ist ein anderer, ein Einzeiler, der den Wert nicht neu zuweist:

$("#inp").focus()[0].setSelectionRange(99999, 99999);
Chong Lip Phang
quelle
0
function CurFocus()
{
    $('.txtEmail').focus(); 
}

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

window.onload = pageLoad;
Abbijohn
quelle
0

Die Antwort von scorpion9 funktioniert. Um es klarer zu machen, siehe meinen Code unten,

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

Es wird mit der Maus fokussiert

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

Pergin Sheni
quelle