Wie können Sie den Cursor an die letzte Stelle eines Textbereiches in Javascript bewegen?

Question

Ich habe ein Textfeld und eine Schaltfläche auf einem Formular. Das Textfeld enthält möglicherweise bereits Text. Ich möchte, dass der Cursor beim Klicken auf die Schaltfläche zur letzten Position im Textbereich bewegt wird.

Ist das möglich?

Answer 1

Mit "die letzte Position" meinst du das Ende des Textes?

Durch Ändern des '.value' eines Formularfelds wird der Cursor in jedem Browser mit Ausnahme von IE an das Ende verschoben. Mit IE müssen Sie Ihre Hände schmutzig und gezielt zu manipulieren, um die Auswahl zu erhalten, unter Verwendung von Nicht-Standard-Schnittstellen:

if (browserIsIE) { 
     var range= element.createTextRange(); 
     range.collapse(false); 
     range.select(); 
    } else { 
     element.focus(); 
     var v= element.value(); 
     element.value= ''; 
     element.value= v; 
    } 

Oder meinen Sie den Cursor an die Stelle es vorher war zurückgestellt, das letzte Mal, das Textfeld war fokussiert?

In jedem Browser außer IE, geschieht dies bereits durch den Aufruf von 'element.focus()'; Der Browser speichert die letzte Cursor-/Auswahlposition pro Eingabe und setzt sie wieder auf den Fokus.

Dies wäre ziemlich schwierig in IE zu reproduzieren. Sie müssten die ganze Zeit abfragen, um zu überprüfen, wo sich der Cursor/die Auswahl befand, und sich an diese Position erinnern, wenn sie in einem Eingabeelement war, dann die Position für ein bestimmtes Element abrufen und sie wiederherstellen. Dies beinhaltet einige ziemlich mühsame Manipulation von 'document.selection.createRange()'.

Mir ist nichts in jQuery bekannt, das Ihnen dabei helfen könnte, aber vielleicht gibt es irgendwo ein Plugin?

Answer 2

Die Antwort von xgMz war am besten für mich. Sie müssen nicht über den Browser kümmern:

var html = $("#MyTextArea").val(); 
$("#MyTextArea").focus().val("").val(html); 

Und hier ist eine schnelle jQuery-Erweiterung ich das für mich das nächste Mal zu tun hat geschrieben:

; (function($) { 
    $.fn.focusToEnd = function() { 
     return this.each(function() { 
      var v = $(this).val(); 
      $(this).focus().val("").val(v); 
     }); 
    }; 
})(jQuery); 

Verwendung wie folgt aus:

$("#MyTextArea").focusToEnd(); 

Answer 3

Dies ist, was ich für Textareas in meinem Onclick oder anderen Ereignissen verwende und scheint für FireFox und IE 7 & 8. Es positioniert den Cursor am Ende des Textes statt der Front.

this.value = "some text I want to pre-populate"; 
this.blur(); 
this.focus(); 

Answer 4

Um den Mausfokus einzustellen und den Cursor zum Ende der Eingabe zu bewegen. Es funktioniert in jedem Browser, Es ist nur eine einfache Logik hier. Dieser Code funktioniert sowohl für input und textarea

$(document).ready(function() 
{ 
    var el = $("#myInput").get(0); 

    var elemLen = el.value.length; 

    el.selectionStart = elemLen; 
    el.selectionEnd = elemLen; 

    el.focus(); 
});​ 

:

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

Answer 5

Man könnte dieses Sie https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd(); 

Answer 6

verwenden, um dies auch tun. Getestet mit den neuesten Browsern: Firefox 23, IE 11 und Chrome 28.

jsFiddle hier verfügbar: http://jsfiddle.net/cG9gN/1/

Quelle: https://stackoverflow.com/a/12654402/114029

Answer 7

I @mkaj Erweiterung verändert ein wenig für zu haben gelesen, dass Standardwert

; (function($) { 
    $.fn.focusToEnd = function(defaultValue) { 
     return this.each(function() { 
      var prevValue = $(this).val(); 
      if (typeof prevValue == undefined || prevValue == "") { 
       prevValue = defaultValue; 
      } 
      $(this).focus().val("").val(prevValue); 
     }); 
    }; 
})(jQuery); 

// See it in action here 
$(element).focusToEnd("Cursor will be at my tail...");