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

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?

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

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.

Hoffe das hilft dir:

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

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

Was ist mit einer einzigen Zeile ...

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

Diese Linie funktioniert bei mir.

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

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

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

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

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 .

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

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

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

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

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

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

funktioniert für alle dh Browser.

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

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

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

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

window.onload = pageLoad;

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>

Es wird mit der Maus fokussiert

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