Użyj JavaScript, aby umieścić kursor na końcu tekstu w elemencie wprowadzania tekstu

Jak najlepiej (i zakładam najprostszy sposób) umieścić kursor na końcu tekstu w elemencie wejściowym za pomocą JavaScript - po ustawieniu fokusa na elemencie?

Napotkałem ten sam problem (po ustawieniu ostrości przez RJS / prototyp) w IE. Firefox już opuszczał kursor na końcu, gdy pole ma już wartość. IE zmuszał kursor do początku tekstu.

Rozwiązanie, do którego doszedłem, jest następujące:

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

Działa to zarówno w IE7, jak i FF3

Istnieje prosty sposób, aby uruchomić go w większości przeglądarek.

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

Jednak z powodu * dziwactw niektórych przeglądarek bardziej kompleksowa odpowiedź wygląda mniej więcej tak

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

Korzystanie z jQuery (aby ustawić detektor, ale inaczej nie jest to konieczne)

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

Korzystanie z Vanilla JS ( addEventfunkcja pożyczania z tej odpowiedzi )

// 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'>

Dziwactwa

Chrome ma dziwne dziwactwo, gdy zdarzenie skupienia jest uruchamiane, zanim kursor zostanie przeniesiony w pole; co psuje moje proste rozwiązanie. Dwie opcje, aby to naprawić:

1. Możesz dodać limit czasu 0 ms (aby odroczyć operację do momentu wyczyszczenia stosu )
2. Możesz zmienić wydarzenie z focusna mouseup. Byłoby to dość denerwujące dla użytkownika, chyba że nadal będziesz śledzić koncentrację. Tak naprawdę nie jestem zakochana w żadnej z tych opcji.

@Vladkras wskazał również, że niektóre starsze wersje Opery niepoprawnie obliczają długość, gdy ma spacje. W tym celu możesz użyć ogromnej liczby, która powinna być większa niż ciąg.

Spróbuj, to zadziałało dla mnie:

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

Aby kursor został przesunięty na koniec, wejście musi najpierw skupić się, a następnie po zmianie wartości dojdzie do końca. Jeśli ustawisz .value na tę samą wartość, nie zmieni się ona w chrome.

Po drobnym włamaniu się do tego, znalazłem najlepszy sposób, aby użyć tej setSelectionRangefunkcji, jeśli przeglądarka ją obsługuje; jeśli nie, wróć do korzystania z metody zawartej w odpowiedzi Mike'a Berrowa (tj. zamień wartość na samą siebie).

Ustawiam też scrollTopwysoką wartość na wypadek, gdybyśmy mogli przewijać w pionie textarea. (Korzystanie z dowolnej wysokiej wartości wydaje się bardziej niezawodne niż $(this).height()w Firefoksie i Chrome.)

Zrobiłem to jako wtyczkę jQuery. (Jeśli nie używasz jQuery, ufam, że nadal możesz łatwo dostrzec istotę.)

Testowałem w IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

Jest dostępny na stronie jquery.com jako wtyczka PutCursorAtEnd . Dla Twojej wygody kod wersji 1.0 wygląda następująco:

// 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>  

Ta funkcja działa dla mnie w IE9, Firefox 6.x i Opera 11.x

Próbowałem następujących z dużym sukcesem w chrome

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

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

Szybkie podsumowanie:

Pobiera wszystkie pola wejściowe, na których koncentruje się klasa, a następnie zapisuje starą wartość pola wejściowego w zmiennej, a następnie stosuje pusty ciąg do pola wejściowego.

Następnie czeka 1 milisekundę i ponownie wprowadza starą wartość.

Jest rok 2019 i żadna z powyższych metod nie zadziałała dla mnie, ale ta zadziałała, zaczerpnięta z https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/

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>

Prosty. Podczas edycji lub zmiany wartości najpierw ustaw fokus, a następnie ustaw wartość.

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

Nadal potrzebna jest zmienna pośrednia (patrz var val =), inaczej kursor zachowuje się dziwnie, potrzebujemy jej na końcu.

<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

Ta metoda aktualizuje właściwości HTMLInputElement.selectionStart, selectionEnd i selectionDirection w jednym wywołaniu.

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

W innych metodach js -1zwykle oznacza (do) ostatniego znaku. Dotyczy to również tego, ale nie mogłem znaleźć wyraźnej wzmianki o tym zachowaniu w dokumentacji.

Dla wszystkich przeglądarek we wszystkich przypadkach:

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

Limit czasu jest wymagany, jeśli chcesz przenieść kursor z modułu obsługi zdarzeń onFocus

Bardzo podoba mi się zaakceptowana odpowiedź, ale przestała działać w Chrome. W Chrome, aby kursor znalazł się na końcu, wartość wejściowa musi się zmienić. Rozwiązanie jest następujące:

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

W jQuery to jest

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

Ten problem jest interesujący. Najbardziej mylące jest to, że żadne rozwiązanie, które znalazłem, nie rozwiązało problemu całkowicie.

+++++++ ROZWIĄZANIE +++++++

1. Potrzebujesz funkcji JS, takiej jak ta:

   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. Musisz zadzwonić do tego faceta podczas wydarzeń onfocus i onclick.

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

TO DZIAŁA NA WSZYSTKICH URZĄDZENIACH PRZEGLĄDAREK !!!!

Właśnie odkryłem, że w iOS ustawienie textarea.textContentwłaściwości spowoduje umieszczenie kursora na końcu tekstu w elemencie textarea za każdym razem. Zachowanie to było błędem w mojej aplikacji, ale wydaje się, że można tego użyć celowo.

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

Biorąc niektóre odpowiedzi .. tworząc jednowierszową jquery.

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

Jeśli pole wejściowe potrzebuje tylko statycznej wartości domyślnej, zwykle robię to za pomocą jQuery:

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

Wydaje się, że działa to we wszystkich przeglądarkach.

Chociaż może to być stare pytanie z dużą ilością odpowiedzi, natknąłem się na podobny problem i żadna z odpowiedzi nie była dokładnie tym, czego chciałem i / lub nie została źle wyjaśniona. Problem z właściwością selectionStart i selectionEnd polega na tym, że nie istnieją one dla numeru typu danych wejściowych (choć pytanie dotyczy typu tekstu, myślę, że może to pomóc innym, którzy mogą mieć inne typy danych wejściowych, na których powinni się skupić). Więc jeśli nie wiesz, czy typem wejściowym, na którym będzie się skupiać funkcja, jest liczba typu, czy nie, nie możesz użyć tego rozwiązania.

Rozwiązanie, które działa w różnych przeglądarkach i dla wszystkich typów danych wejściowych, jest raczej proste:

• pobierz i zapisz wartość danych wejściowych w zmiennej
• skoncentruj wejście
• ustaw wartość wejściową na zapisaną wartość

W ten sposób kursor znajduje się na końcu elementu wejściowego.
Wszystko, co możesz zrobić, to coś takiego (używając jquery, pod warunkiem, że selektor elementów, na który chcemy się skupić, jest dostępny poprzez atrybut danych „element-focus-element” klikniętego elementu, a funkcja wykonuje się po kliknięciu „.foo” element):

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

Dlaczego to działa? Po prostu, gdy wywoływana jest funkcja .focus (), fokus zostanie dodany na początku elementu wejściowego (co jest tutaj głównym problemem), ignorując fakt, że element wejściowy ma już w sobie wartość. Jednak po zmianie wartości danych wejściowych kursor jest automatycznie umieszczany na końcu wartości w elemencie wejściowym. Więc jeśli zastąpisz wartość tą samą wartością, która została wcześniej wprowadzona na wejściu, wartość będzie wyglądać nietknięta, kursor przesunie się jednak na koniec.

Wypróbuj ten działa z Vanilla JavaScript.

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

W Js

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

Ustaw kursor po kliknięciu obszaru tekstowego na końcu tekstu ... Odmiana tego kodu jest ... TAKŻE działa! dla Firefox, IE, Safari, Chrome ..

W kodzie po stronie serwera:

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

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

Jeśli najpierw ustawisz wartość, a następnie fokus, kursor będzie zawsze pojawiał się na końcu.

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

Oto skrzypce do testowania https://jsfiddle.net/5on50caf/1/

Chciałem umieścić kursor na końcu elementu „div”, gdzie contenteditable = true, i dostałem rozwiązanie z kodem Xeoncross :

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

I ta funkcja robi magię:

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

Działa dobrze dla większości przeglądarek, sprawdź to, ten kod umieszcza tekst i umieszcza fokus na końcu tekstu w elemencie div (nie elemencie wejściowym)

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

Dzięki, Xeoncross

Też napotkałem ten sam problem. Wreszcie to zadziała dla mnie:

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;

  });

};

Oto jak możemy to nazwać:

var searchInput = $("#searchInputOrTextarea");

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

Działa dla mnie w Safari, IE, Chrome, Mozilla. Na urządzeniach mobilnych nie próbowałem tego.

Sprawdź to rozwiązanie!

//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 łatwe (być może będziesz musiał skupić się na elemencie wejściowym)

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

Próbowałem wcześniej sugestii, ale żadna nie działała dla mnie (przetestowałem je w Chrome), więc napisałem własny kod - i działa dobrze w Firefox, IE, Safari, Chrome ...

W Textarea:

onfocus() = sendCursorToEnd(this);

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

Oto demo jsFiddle mojej odpowiedzi. Demo używa CoffeeScript, ale możesz przekonwertować go na zwykły JavaScript razie potrzeby .

Ważna część w JavaScript:

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

Publikuję tę odpowiedź, ponieważ napisałem ją już dla kogoś, kto miał to samo pytanie. Ta odpowiedź nie obejmuje tylu przypadków krawędzi, co najlepsze odpowiedzi tutaj, ale działa dla mnie i ma wersję demonstracyjną jsFiddle, z którą możesz grać.

Oto kod z jsFiddle, więc ta odpowiedź zostanie zachowana, nawet jeśli jsFiddle zniknie:

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

Wypróbuj następujący kod:

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

Chociaż odpowiadam za późno, ale w przypadku przyszłych zapytań będzie to pomocne. I działa również w contenteditablediv.

Skąd należy ustawić fokus na końcu; napisz ten kod

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

A funkcja to -

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