Verwenden Sie JavaScript, um den Cursor am Ende des Texts im Texteingabeelement zu platzieren

Was ist der beste Weg (und ich nehme den einfachsten Weg an), den Cursor am Ende des Textes in einem Eingabetextelement über JavaScript zu platzieren - nachdem der Fokus auf das Element gesetzt wurde?

Ich hatte das gleiche Problem (nachdem ich den Fokus über RJS / Prototyp gesetzt hatte) im IE. Firefox hat den Cursor bereits am Ende verlassen, wenn bereits ein Wert für das Feld vorhanden ist. IE zwang den Cursor an den Anfang des Textes.

Die Lösung, zu der ich gekommen bin, lautet wie folgt:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

Dies funktioniert sowohl in IE7 als auch in FF3

Es gibt eine einfache Möglichkeit, es in den meisten Browsern zum Laufen zu bringen.

this.selectionStart = this.selectionEnd = this.value.length;

Aufgrund der * Macken einiger Browser sieht eine umfassendere Antwort jedoch eher so aus

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

Verwenden von jQuery (um den Listener festzulegen, aber sonst ist es nicht erforderlich)

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

Verwenden von Vanilla JS (Ausleihfunktion addEventaus dieser Antwort )

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

Macken

Chrome hat eine merkwürdige Eigenart, bei der das Fokusereignis ausgelöst wird, bevor der Cursor in das Feld bewegt wird. was meine einfache Lösung vermasselt. Zwei Optionen, um dies zu beheben:

1. Sie können eine Zeitüberschreitung von 0 ms hinzufügen ( um den Vorgang zu verschieben, bis der Stapel frei ist ).
2. Sie können das Ereignis von focusbis ändern mouseup. Dies wäre für den Benutzer ziemlich ärgerlich, wenn Sie nicht den Fokus behalten würden. Ich bin nicht wirklich in eine dieser Optionen verliebt.

Außerdem wies @vladkras darauf hin, dass einige ältere Versionen von Opera die Länge falsch berechnen, wenn Leerzeichen vorhanden sind. Hierfür können Sie eine große Zahl verwenden, die größer als Ihre Zeichenfolge sein sollte.

Versuchen Sie dies, es hat bei mir funktioniert:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

Damit sich der Cursor zum Ende bewegt, muss die Eingabe zuerst fokussiert sein. Wenn der Wert geändert wird, wird das Ende erreicht. Wenn Sie .value auf den gleichen Wert einstellen, ändert sich dies in Chrome nicht.

Nachdem ich ein bisschen damit herumgehackt hatte, fand ich, dass der beste Weg war, die setSelectionRangeFunktion zu verwenden, wenn der Browser sie unterstützt. Wenn nicht, verwenden Sie wieder die Methode in Mike Berrows Antwort (dh ersetzen Sie den Wert durch sich selbst).

Ich stelle auch scrollTopeinen hohen Wert ein, falls wir vertikal scrollbar sind textarea. (Die Verwendung eines willkürlich hohen Werts scheint zuverlässiger zu sein als $(this).height()in Firefox und Chrome.)

Ich habe es als jQuery-Plugin gemacht. (Wenn Sie jQuery nicht verwenden, können Sie das Wesentliche trotzdem leicht genug verstehen.)

Ich habe in IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4 und Opera 10.00 getestet.

Es ist auf jquery.com als PutCursorAtEnd-Plugin verfügbar . Der Code für Release 1.0 lautet wie folgt:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    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;
    });
    };
})(jQuery);

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

Diese Funktion funktioniert für mich in IE9, Firefox 6.x und Opera 11.x.

Ich habe folgendes mit ziemlich großem Erfolg in Chrom versucht

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

Kurzer Überblick:

Es nimmt jedes Eingabefeld mit dem Klassenfokus darauf, speichert dann den alten Wert des Eingabefelds in einer Variablen und wendet anschließend die leere Zeichenfolge auf das Eingabefeld an.

Dann wartet es 1 Millisekunde und gibt den alten Wert wieder ein.

Es ist 2019 und keine der oben genannten Methoden hat bei mir funktioniert, aber diese hat von https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/ übernommen.

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}

<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>

Einfach. Stellen Sie beim Bearbeiten oder Ändern von Werten zuerst den Fokus und dann den Wert ein.

$("#catg_name").focus();
$("#catg_name").val(catg_name);

Trotzdem wird die Zwischenvariable benötigt (siehe var val =), sonst verhält sich der Cursor seltsam, wir brauchen sie am Ende.

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

Diese Methode aktualisiert die Eigenschaften HTMLInputElement.selectionStart, selectionEnd und selectionDirection in einem Aufruf.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

In anderen js-Methoden -1bedeutet normalerweise (bis zum) letzten Zeichen. Dies ist auch bei diesem Fall der Fall, aber ich konnte dieses Verhalten in den Dokumenten nicht explizit erwähnen.

Für alle Browser für alle Fälle:

function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}

Zeitüberschreitung erforderlich, wenn Sie den Cursor vom onFocus-Ereignishandler bewegen müssen

Ich mag die akzeptierte Antwort sehr, aber sie funktioniert in Chrome nicht mehr. In Chrome muss sich der Eingabewert ändern, damit der Cursor das Ende erreicht. Die Lösung lautet wie folgt:

<input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>

In jQuery ist das so

$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}

Dieses Problem ist interessant. Das Verwirrendste daran ist, dass keine Lösung, die ich gefunden habe, das Problem vollständig gelöst hat.

+++++++ LÖSUNG +++++++

1. Sie benötigen eine JS-Funktion wie folgt:

   function moveCursorToEnd(obj) {
   
     if (!(obj.updating)) {
       obj.updating = true;
       var oldValue = obj.value;
       obj.value = '';
       setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
     }
   
   }

2. Sie müssen diesen Typen in den Onfocus- und Onclick-Ereignissen anrufen.

   <input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">

ES FUNKTIONIERT AN ALLEN GERÄTEN UND BROWSERS !!!!

Ich habe gerade festgestellt, dass unter iOS die Einstellungseigenschaft textarea.textContentden Cursor jedes Mal am Ende des Textes im Textbereichselement platziert. Das Verhalten war ein Fehler in meiner App, scheint aber etwas zu sein, das Sie absichtlich verwenden könnten.

var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);

Nehmen Sie einige der Antworten .. machen Sie eine einzeilige Abfrage.

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

Wenn das Eingabefeld nur einen statischen Standardwert benötigt, mache ich dies normalerweise mit jQuery:

$('#input').focus().val('Default value');

Dies scheint in allen Browsern zu funktionieren.

Obwohl dies eine alte Frage mit vielen Antworten sein mag, bin ich auf ein ähnliches Problem gestoßen, und keine der Antworten entsprach genau meinen Wünschen und / oder wurde schlecht erklärt. Das Problem mit den Eigenschaften selectionStart und selectionEnd besteht darin, dass sie für die Eingabetypnummer nicht vorhanden sind (während die Frage nach dem Texttyp gestellt wurde, kann dies meiner Meinung nach anderen helfen, die möglicherweise andere Eingabetypen haben, auf die sie sich konzentrieren müssen). Wenn Sie also nicht wissen, ob der Eingabetyp, auf den sich die Funktion konzentriert, eine Typennummer ist oder nicht, können Sie diese Lösung nicht verwenden.

Die Lösung, die browserübergreifend und für alle Eingabetypen funktioniert, ist recht einfach:

• Abrufen und Speichern des Eingabewerts in einer Variablen
• Fokussieren Sie die Eingabe
• Setzen Sie den Wert der Eingabe auf den gespeicherten Wert

Auf diese Weise befindet sich der Cursor am Ende des Eingabeelements.
Alles, was Sie tun würden, ist so etwas (mit jquery, vorausgesetzt, der Element-Selektor, den Sie fokussieren möchten, ist über das Datenattribut 'data-focus-element' des angeklickten Elements zugänglich und die Funktion wird ausgeführt, nachdem Sie auf '.foo' geklickt haben. Element):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

Warum funktioniert das? Wenn einfach .focus () aufgerufen wird, wird der Fokus am Anfang des Eingabeelements hinzugefügt (was hier das Kernproblem ist), wobei die Tatsache ignoriert wird, dass das Eingabeelement bereits einen Wert enthält. Wenn jedoch der Wert einer Eingabe geändert wird, wird der Cursor automatisch am Ende des Werts innerhalb des Eingabeelements platziert. Wenn Sie also den Wert mit demselben Wert überschreiben, der zuvor in die Eingabe eingegeben wurde, bleibt der Wert unberührt, der Cursor bewegt sich jedoch zum Ende.

Versuchen Sie, dass dies mit Vanilla JavaScript funktioniert.

<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">

In Js

document.getElementById("yourId").focus()

Setzen Sie den Cursor, wenn Sie auf den Textbereich bis zum Ende des Textes klicken ... Variation dieses Codes ist ... AUCH funktioniert! für Firefox, IE, Safari, Chrome ..

Im serverseitigen Code:

txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")

In Javascript:

function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }

Wenn Sie zuerst den Wert und dann den Fokus einstellen, erscheint der Cursor immer am Ende.

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

Hier ist die Geige zum Testen von https://jsfiddle.net/5on50caf/1/

Ich wollte den Cursor an das Ende eines "div" -Elements setzen, wobei contenteditable = true ist, und habe eine Lösung mit Xeoncross-Code erhalten :

<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

Und diese Funktion zaubert:

 function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Funktioniert gut für die meisten Browser. Bitte überprüfen Sie es. Dieser Code setzt Text und setzt den Fokus am Ende des Textes im div-Element (kein Eingabeelement).

https://jsfiddle.net/Xeoncross/4tUDk/

Danke, Xeoncross

Ich hatte auch das gleiche Problem. Endlich wird das für mich funktionieren:

jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

So können wir das nennen:

var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

Es funktioniert für mich in Safari, IE, Chrome, Mozilla. Auf Mobilgeräten habe ich das nicht ausprobiert.

Überprüfen Sie diese Lösung!

//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>

Super einfach (möglicherweise müssen Sie sich auf das Eingabeelement konzentrieren)

inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;

Ich habe die Vorschläge schon einmal ausprobiert, aber keiner hat für mich funktioniert (sie wurden in Chrome getestet), also habe ich meinen eigenen Code geschrieben - und er funktioniert gut in Firefox, IE, Safari, Chrome ...

Im Textbereich:

onfocus() = sendCursorToEnd(this);

In Javascript:

function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}

Hier ist eine jsFiddle-Demo meiner Antwort. Die Demo verwendet CoffeeScript, aber Sie können es in einfaches JavaScript konvertieren bei Bedarf in .

Der wichtige Teil in JavaScript:

var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}

Ich poste diese Antwort, weil ich sie bereits für jemanden geschrieben habe, der dieselbe Frage hatte. Diese Antwort deckt nicht so viele Randfälle ab wie die Top-Antworten hier, funktioniert aber für mich und enthält eine jsFiddle-Demo, mit der Sie spielen können.

Hier ist der Code aus der jsFiddle, sodass diese Antwort auch dann erhalten bleibt, wenn die jsFiddle verschwindet:

moveCursorToEnd = (textField) ->
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery ->
  $('.that-field').on 'click', ->
    moveCursorToEnd(this)

<div class="field">
    <label for="pressure">Blood pressure</label>:
    <input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
    Try clicking in the text field. The cursor will always jump to the end.
</p>

body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}

Versuchen Sie den folgenden Code:

$('input').focus(function () {
    $(this).val($(this).val());
}).focus()

Ich antworte zwar zu spät, aber für zukünftige Fragen wird es hilfreich sein. Und es funktioniert auch incontenteditable div.

Von wo aus müssen Sie am Ende den Fokus setzen; schreibe diesen Code-

var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);

Und die Funktion ist -

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}