[javascript] JavaScript를 사용하여 텍스트 입력 요소의 텍스트 끝에 커서를 놓습니다.

이 문제를 해킹 한 후 setSelectionRange브라우저가 지원하는 경우이 기능 을 사용하는 것이 가장 좋은 방법이라는 것을 알았 습니다. 그렇지 않은 경우 Mike Berrow의 답변에서 방법을 사용하여 되돌립니다 (즉, 값을 자체로 바꿉니다).

또한 scrollTop세로 스크롤 가능한 경우를 대비하여 높은 값으로 설정 하고 textarea있습니다. (임의의 높은 값을 사용하면 $(this).height()Firefox 및 Chrome 보다 안정적으로 보입니다 .)

jQuery 플러그인으로 만들었습니다. (jQuery를 사용하지 않으면 여전히 요점을 쉽게 얻을 수 있다고 신뢰합니다.)

IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00에서 테스트했습니다.

jquery.com에서 PutCursorAtEnd 플러그인 으로 사용할 수 있습니다 . 편의상 릴리스 1.0의 코드는 다음과 같습니다.

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

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

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

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>