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를 사용하여 (리스너를 설정하지만 그렇지 않으면 필요하지 않음)

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

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

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

쿼크

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>

단순한. 값을 편집하거나 변경할 때는 먼저 초점을 맞춘 다음 값을 설정하십시오.

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

여전히 중간 변수가 필요합니다 (var val = 참조). 그렇지 않으면 커서가 이상하게 동작합니다. 끝에 필요합니다.

<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

이 메소드는 한 번의 호출로 HTMLInputElement.selectionStart, selectionEnd 및 selectionDirection 특성을 업데이트합니다.

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

다른 js 메소드에서는 -1일반적으로 마지막 문자를 의미합니다. 이것도 마찬가지이지만 문서 에서이 동작에 대한 언급을 찾을 수 없었습니다.

모든 경우에 대한 모든 브라우저의 경우 :

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

onFocus 이벤트 핸들러에서 커서를 이동해야하는 경우 시간 초과가 필요합니다.

나는 대답을 많이 좋아하지만 Chrome에서 작동을 멈췄습니다. Chrome에서 커서가 끝으로 이동하려면 입력 값을 변경해야합니다. 해결책은 다음과 같습니다.

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

jQuery에서는

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

이 문제는 흥미 롭습니다. 가장 혼란스러운 점은 내가 찾은 해결책으로 문제를 완전히 해결할 수 없다는 것입니다.

+++++++ 솔루션 +++++++

1. 다음과 같은 JS 함수가 필요합니다.

   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. onfocus 및 onclick 이벤트에서이 사람을 호출해야합니다.

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

브라우저에서 모든 장치에서 작동합니다!

방금 iOS에서 textarea.textContent속성을 설정 하면 매번 textarea 요소의 텍스트 끝에 커서가 배치됩니다. 동작은 내 응용 프로그램의 버그 였지만 의도적으로 사용할 수있는 것으로 보입니다.

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

답변 중 일부를 복용 .. 한 줄로 jquery 만들기.

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

입력 필드에 정적 기본값이 필요한 경우 일반적으로 jQuery를 사용 하여이 작업을 수행합니다.

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

이것은 모든 브라우저에서 작동하는 것 같습니다.

이것은 많은 답변이있는 오래된 질문 일지 모르지만 비슷한 문제를 겪었고 그 대답 중 어느 것도 내가 원하거나 잘못 설명하지 않았습니다. selectionStart 및 selectionEnd 속성의 문제는 입력 유형 번호에 존재하지 않는다는 것입니다 (질문이 텍스트 유형에 대한 질문을 받았지만 다른 입력 유형을 가진 사람들이 집중해야 할 수도 있습니다). 따라서 함수가 초점을 맞출 입력 유형이 유형 번호인지 알 수없는 경우 해당 솔루션을 사용할 수 없습니다.

크로스 브라우저와 모든 입력 유형에서 작동하는 솔루션은 다소 간단합니다.

• 입력 값을 변수에 가져오고 저장
• 입력에 집중
• 입력 값을 저장된 값으로 설정

그렇게하면 커서가 입력 요소의 끝에 있습니다.
그래서 당신이 할 일은 이와 같은 것입니다 (jquery를 사용하여 클릭하려는 요소의 'data-focus-element'데이터 속성을 통해 초점을 맞추고 자하는 요소 선택기에 액세스 할 수 있고 '.foo'를 클릭 한 후 함수가 실행되는 경우) 요소):

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

왜 이것이 작동합니까? 간단히 말해 .focus ()가 호출되면 입력 요소 (여기서는 핵심 문제)의 시작 부분에 포커스가 추가되며 입력 요소에 값이 이미 있다는 사실을 무시합니다. 그러나 입력 값이 변경되면 입력 요소 내부의 값 끝에 커서가 자동으로 배치됩니다. 따라서 입력에 이전에 입력 한 것과 동일한 값으로 값을 무시하면 값이 그대로 유지되지만 커서는 끝으로 이동합니다.

이것을 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...">

JS에서

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

텍스트 영역을 텍스트 끝까지 클릭 할 때 커서를 설정하십시오.이 코드의 변형은 다음과 같습니다. Firefox, IE, Safari, Chrome 용

서버 측 코드에서 :

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

자바 스크립트에서 :

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

값을 먼저 설정 한 다음 초점을 설정하면 커서가 항상 끝에 나타납니다.

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

다음은 테스트 할 바이올린입니다 https://jsfiddle.net/5on50caf/1/

contenteditable = true 인 "div"요소의 끝에 커서를두고 싶었고 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>

그리고이 기능은 마술을합니다 :

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

대부분의 브라우저에서 잘 작동합니다. 확인하십시오.이 코드는 텍스트를 입력하고 div 요소 (입력 요소 아님)의 텍스트 끝에 초점을 둡니다.

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

고마워, 제온 크로스

나는 또한 같은 문제에 직면했다. 마침내 이것은 나를 위해 일할 것입니다 :

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;

  });

};

이것이 우리가 이것을 부를 수있는 방법입니다 :

var searchInput = $("#searchInputOrTextarea");

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

사파리, IE, Chrome, Mozilla에서 작동합니다. 모바일 장치에서 나는 이것을 시도하지 않았습니다.

이 솔루션을 확인하십시오!

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

매우 쉬움 (입력 요소에 집중해야 할 수도 있음)

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

전에 제안을 시도했지만 아무도 효과가 없었습니다 (Chrome에서 테스트). 내 코드를 작성했습니다 .Firefox, IE, Safari, Chrome에서 잘 작동합니다 ...

Textarea에서 :

onfocus() = sendCursorToEnd(this);

자바 스크립트에서 :

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

여기의 jsFiddle 데모 내 대답. 데모는 CoffeeScript를 사용하지만 필요한 경우 일반 JavaScript로 변환 할 수 있습니다 .

JavaScript에서 중요한 부분 :

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

나는 같은 질문을 가진 다른 사람을 위해 이미 답변했기 때문에이 답변을 게시하고 있습니다. 이 답변은 최고의 답변만큼 많은 경우를 다루지 않지만 저에게 효과적이며 jsFiddle 데모를 사용할 수 있습니다.

다음은 jsFiddle의 코드이므로 jsFiddle이 사라지더라도이 답변은 유지됩니다.

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

다음 코드를 시도하십시오.

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

답변이 너무 늦었지만 향후 질문에 도움이 될 것입니다. 그리고 그것은 contenteditablediv 에서도 작동 합니다.

마지막에 초점을 설정해야하는 곳에서; 이 코드를 작성

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

그리고 기능은-

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