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

포커스가 요소로 설정된 후 JavaScript를 통해 입력 텍스트 요소의 텍스트 끝에 커서를 배치하는 가장 좋은 방법은 무엇입니까?



답변

IE에서 동일한 문제 (RJS / 프로토 타입을 통해 포커스를 설정 한 후)에 직면했습니다. 필드 값이 이미있을 때 Firefox는 이미 커서를 종료합니다. IE는 커서를 텍스트의 시작 부분으로 강제했습니다.

내가 도착한 해결책은 다음과 같습니다.

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

이것은 IE7과 FF3 모두에서 작동합니다.


답변

대부분의 브라우저 에서 작동하게하는 간단한 방법이 있습니다 .

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

그러나 몇몇 브라우저의 단점 때문에 더 포괄적 인 답변은 다음과 같습니다.

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

jQuery를 사용하여 (리스너를 설정하지만 그렇지 않으면 필요하지 않음)

바닐라 JS 사용하기 ( 이 답변의 차용 addEvent기능 )


쿼크

Chrome에는 커서가 필드로 이동하기 전에 포커스 이벤트가 발생하는 이상한 문제가 있습니다. 내 간단한 솔루션을 망칠 수 있습니다. 이 문제를 해결하기위한 두 가지 옵션 :

  1. (당신은 0 ms의 시간 제한을 추가 할 수 있습니다 스택가 선명해질 때까지 작업을 연기 )
  2. 이벤트를에서 (으) focus로 변경할 수 있습니다 mouseup. 여전히 초점을 추적하지 않으면 사용자에게는 꽤 성 가실 것입니다. 나는이 옵션 중 하나를 정말로 좋아하지 않습니다.

또한 @vladkras는 일부 이전 버전의 Opera에는 공백이있을 때 길이를 잘못 계산한다고 지적했습니다. 이를 위해 문자열보다 큰 숫자를 사용할 수 있습니다.


답변

이것을 시도해보십시오, 그것은 나를 위해 일했습니다 :

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

커서가 끝으로 이동하려면 먼저 입력에 포커스가 있어야하고 값이 변경되면 끝으로 이동합니다. .value를 동일하게 설정하면 크롬에서 변경되지 않습니다.


답변

이 문제를 해킹 한 후 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>  

이 기능은 IE9, Firefox 6.x 및 Opera 11.x에서 작동합니다.


답변

크롬에서 상당히 큰 성공을 거두어 다음을 시도했습니다.

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

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

빠른 정리 :

클래스 포커스가있는 모든 입력 필드를 가져온 다음 입력 필드의 이전 값을 변수에 저장 한 다음 빈 문자열을 입력 필드에 적용합니다.

그런 다음 1 밀리 초 동안 기다렸다가 이전 값을 다시 입력합니다.


답변

2019 년이며 위의 방법 중 어느 것도 나를 위해 효과가 없었지만 이것은 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>