Sử dụng JavaScript để đặt con trỏ ở cuối văn bản trong phần tử nhập văn bản

Cách tốt nhất (và tôi đoán là cách đơn giản nhất) để đặt con trỏ ở cuối văn bản trong phần tử văn bản đầu vào thông qua JavaScript - sau khi tiêu điểm đã được đặt thành phần tử?

Tôi đã đối mặt với vấn đề tương tự (sau khi thiết lập tiêu điểm thông qua RJS / nguyên mẫu) trong IE. Firefox đã rời khỏi con trỏ ở cuối khi đã có một giá trị cho trường. IE đã buộc con trỏ đến đầu văn bản.

Giải pháp tôi đưa ra là như sau:

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

Điều này hoạt động trong cả IE7 và FF3

Có một cách đơn giản để làm cho nó hoạt động trong hầu hết các trình duyệt.

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

Tuy nhiên, do * sự kỳ quặc của một vài trình duyệt, một câu trả lời bao quát hơn trông giống như thế này

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

Sử dụng jQuery (để đặt trình nghe, nhưng không cần thiết khác)

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

Sử dụng Vanilla JS ( addEventhàm mượn từ câu trả lời này )

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

Quirks

Chrome có một cách giải quyết kỳ lạ khi sự kiện tiêu điểm kích hoạt trước khi con trỏ được di chuyển vào trường; mà vít giải pháp đơn giản của tôi lên. Hai tùy chọn để khắc phục điều này:

1. Bạn có thể thêm thời gian chờ là 0 ms (để trì hoãn thao tác cho đến khi ngăn xếp rõ ràng )
2. Bạn có thể thay đổi sự kiện từ focusđến mouseup. Điều này sẽ khá khó chịu cho người dùng trừ khi bạn vẫn theo dõi sự tập trung. Tôi không thực sự yêu một trong hai lựa chọn này.

Ngoài ra, @vladkras chỉ ra rằng một số phiên bản cũ của Opera tính toán không chính xác độ dài khi nó có khoảng trắng. Đối với điều này, bạn có thể sử dụng một số lượng lớn phải lớn hơn chuỗi của bạn.

Hãy thử điều này, nó đã làm việc cho tôi:

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

Để con trỏ được di chuyển đến cuối, đầu vào phải có tiêu điểm trước, sau đó khi giá trị được thay đổi, nó sẽ chuyển sang kết thúc. Nếu bạn đặt .value thành như nhau, nó sẽ không thay đổi trong chrome.

Sau khi hack xung quanh với điều này một chút, tôi thấy cách tốt nhất là sử dụng setSelectionRange chức năng nếu trình duyệt hỗ trợ nó; nếu không, hãy quay lại sử dụng phương thức trong câu trả lời của Mike Berrow (nghĩa là thay thế giá trị bằng chính nó).

Tôi cũng đang thiết lập scrollTopmột giá trị cao trong trường hợp chúng ta có thể cuộn theo chiều dọc textarea. (Sử dụng giá trị cao tùy ý có vẻ đáng tin cậy hơn$(this).height() trong Firefox và Chrome.)

Tôi đã thực hiện nó như là một plugin jQuery. (Nếu bạn không sử dụng jQuery, tôi tin rằng bạn vẫn có thể nhận được ý chính đủ dễ dàng.)

Tôi đã thử nghiệm trong IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10:00.

Nó có sẵn trên jquery.com dưới dạng plugin PutC bổngAtEnd . Để thuận tiện cho bạn, mã cho bản phát hành 1.0 như sau:

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

Chức năng này hoạt động với tôi trong IE9, Firefox 6.x và Opera 11.x

Tôi đã thử những điều sau đây với thành công khá lớn trong chrome

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

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

Nhanh chóng tải xuống:

Nó nhận mọi trường đầu vào với lớp tập trung vào nó, sau đó lưu giá trị cũ của trường đầu vào vào một biến, sau đó nó áp dụng chuỗi rỗng vào trường đầu vào.

Sau đó, nó đợi 1 triệu giây và đặt lại giá trị cũ.

Đó là năm 2019 và không có phương pháp nào ở trên hoạt động với tôi, nhưng phương pháp này đã được thực hiện, được lấy từ https://css-tricks.com/snippets/javascript/move-coder-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>

Đơn giản. Khi chỉnh sửa hoặc thay đổi giá trị, trước tiên hãy đặt tiêu điểm sau đó đặt giá trị.

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

Vẫn là biến trung gian là cần thiết, (xem var val =) khác con trỏ hành xử lạ, chúng ta cần nó ở cuối.

<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

Phương thức này cập nhật các thuộc tính HTMLInputEuity.selectionStart, selectEnd và selectDirection trong một cuộc gọi.

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

Trong các phương thức js khác -1thường có nghĩa là (đến) ký tự cuối cùng. Đây cũng là trường hợp này, nhưng tôi không thể tìm thấy đề cập rõ ràng về hành vi này trong các tài liệu.

Đối với tất cả các trình duyệt cho tất cả các trường hợp:

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

Hết thời gian chờ nếu bạn cần di chuyển con trỏ từ trình xử lý sự kiện onF Focus

Tôi thích câu trả lời được chấp nhận rất nhiều, nhưng nó đã ngừng hoạt động trong Chrome. Trong Chrome, để con trỏ đi đến cuối, giá trị đầu vào cần thay đổi. Giải pháp như sau:

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

Trong jQuery, đó là

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

Vấn đề này thật thú vị. Điều khó hiểu nhất về nó là không có giải pháp nào tôi tìm thấy đã giải quyết vấn đề hoàn toàn.

+++++++ GIẢI PHÁP +++++++

1. Bạn cần một hàm JS, như thế này:

   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. Bạn cần gọi anh chàng này trong các sự kiện onf Focus và onclick.

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

CÔNG TRÌNH NÓ TRÊN TẤT CẢ CÁC THIẾT BỊ MỘT BROWSERS !!!!

Tôi chỉ thấy rằng trong iOS, cài đặt thuộc textarea.textContenttính sẽ đặt con trỏ ở cuối văn bản trong phần tử textarea mỗi lần. Hành vi là một lỗi trong ứng dụng của tôi, nhưng dường như là thứ mà bạn có thể sử dụng có chủ ý.

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

Lấy một số câu trả lời .. làm một câu đố đơn dòng.

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

Nếu trường đầu vào chỉ cần một giá trị mặc định tĩnh, tôi thường làm điều này với jQuery:

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

Điều này dường như hoạt động trong tất cả các trình duyệt.

Mặc dù đây có thể là một câu hỏi cũ với rất nhiều câu trả lời, tôi đã gặp một vấn đề tương tự và không có câu trả lời nào đúng như tôi muốn và / hoặc được giải thích kém. Vấn đề với các thuộc tính selectStart và selectEnd là chúng không tồn tại cho số loại đầu vào (trong khi câu hỏi được hỏi về loại văn bản, tôi cho rằng nó có thể giúp những người khác có thể có các loại đầu vào khác mà họ cần tập trung). Vì vậy, nếu bạn không biết liệu loại đầu vào mà hàm sẽ tập trung có phải là số loại hay không, bạn không thể sử dụng giải pháp đó.

Giải pháp hoạt động trên nhiều trình duyệt và cho tất cả các loại đầu vào khá đơn giản:

• nhận và lưu trữ giá trị của đầu vào trong một biến
• tập trung đầu vào
• đặt giá trị đầu vào thành giá trị được lưu trữ

Bằng cách đó, con trỏ ở cuối phần tử đầu vào.
Vì vậy, tất cả những gì bạn làm là một cái gì đó như thế này (sử dụng jquery, với điều kiện bộ chọn phần tử mà một người muốn lấy nét có thể truy cập được thông qua thuộc tính dữ liệu 'tập trung dữ liệu' của phần tử được nhấp và hàm thực thi sau khi nhấp vào '.foo' thành phần):

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

Tại sao điều này làm việc? Đơn giản, khi gọi .f Focus (), tiêu điểm sẽ được thêm vào đầu phần tử đầu vào (đây là vấn đề cốt lõi ở đây), bỏ qua thực tế là phần tử đầu vào đã có giá trị trong đó. Tuy nhiên, khi giá trị của đầu vào bị thay đổi, con trỏ sẽ tự động được đặt ở cuối giá trị bên trong phần tử đầu vào. Vì vậy, nếu bạn ghi đè giá trị bằng cùng giá trị đã được nhập trước đó vào đầu vào, giá trị sẽ trông không bị ảnh hưởng, tuy nhiên, con trỏ sẽ di chuyển đến cuối.

Hãy thử cái này hoạt động với 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...">

Trong Js

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

Đặt con trỏ khi nhấp vào vùng văn bản ở cuối văn bản ... Biến thể của mã này là ... CSONG hoạt động! cho Firefox, IE, Safari, Chrome ..

Trong mã phía máy chủ:

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

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

Nếu bạn đặt giá trị trước rồi đặt tiêu điểm, con trỏ sẽ luôn xuất hiện ở cuối.

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

Dưới đây là mẹo để kiểm tra https://jsfiddle.net/5on50caf/1/

Tôi muốn đặt con trỏ ở cuối phần tử "div" trong đó contenteditable = true và tôi đã có một giải pháp với mã 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>

Và chức năng này làm phép thuật:

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

Hoạt động tốt đối với hầu hết các trình duyệt, vui lòng kiểm tra nó, mã này đặt văn bản và đặt tiêu điểm ở cuối văn bản trong phần tử div (không phải phần tử đầu vào)

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

Cảm ơn, Xeoncross

Tôi cũng phải đối mặt với vấn đề tương tự. Cuối cùng, điều này sẽ làm việc cho tôi:

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;

  });

};

Đây là cách chúng ta có thể gọi đây:

var searchInput = $("#searchInputOrTextarea");

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

Nó hoạt động với tôi trong safari, IE, Chrome, Mozilla. Trên thiết bị di động tôi đã không thử điều này.

Kiểm tra giải pháp này!

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

Siêu dễ (bạn có thể phải tập trung vào yếu tố đầu vào)

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

Tôi đã thử các đề xuất trước đây nhưng không có gợi ý nào cho tôi (đã thử nghiệm chúng trong Chrome), vì vậy tôi đã viết mã của riêng mình - và nó hoạt động tốt trong Firefox, IE, Safari, Chrome ...

Trong văn bản:

onfocus() = sendCursorToEnd(this);

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

Đây là bản demo jsFiddle về câu trả lời của tôi. Bản demo sử dụng CoffeeScript, nhưng bạn có thể chuyển đổi nó thành JavaScript đơn giản nếu bạn cần.

Phần quan trọng, trong JavaScript:

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

Tôi đang đăng câu trả lời này vì tôi đã viết nó cho người khác có cùng câu hỏi. Câu trả lời này không bao gồm nhiều trường hợp cạnh như các câu trả lời hàng đầu ở đây, nhưng nó hoạt động với tôi và có bản demo jsFiddle mà bạn có thể chơi.

Đây là mã từ jsFiddle, vì vậy câu trả lời này được giữ nguyên ngay cả khi jsFiddle biến mất:

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

Hãy thử đoạn mã sau:

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

Mặc dù tôi trả lời quá muộn, nhưng đối với truy vấn trong tương lai, nó sẽ hữu ích. Và nó cũng hoạt động trong contenteditablediv.

Từ nơi bạn cần đặt trọng tâm ở cuối; viết mã này-

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

Và chức năng là -

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