어떻게 자바 스크립트에서 텍스트 영역의 마지막 위치로 커서를 이동할 수 있습니까?

Question

양식에 텍스트 영역과 버튼이 있습니다. 텍스트 영역에 텍스트가 이미있을 수 있습니다. 단추를 클릭 할 때 커서를 텍스트 영역의 마지막 위치로 이동하고 싶습니다.

이것이 가능합니까?

Answer 1

"마지막 위치"는 텍스트의 끝을 의미합니까?

양식 필드의 '. 값'을 변경하면 IE를 제외한 모든 브라우저에서 커서가 끝까지 이동합니다. IE를 사용하면 표준이 아닌 인터페이스를 사용하여 손을 더럽힐 의도적으로 선택을 조작 할 수 있습니다

if (browserIsIE) { 
     var range= element.createTextRange(); 
     range.collapse(false); 
     range.select(); 
    } else { 
     element.focus(); 
     var v= element.value(); 
     element.value= ''; 
     element.value= v; 
    } 

또는 당신이 이전에 있던 장소, 텍스트 영역이었다 마지막으로 다시 커서를 의미합니까 집중 해?

IE를 제외한 모든 브라우저에서 'element.focus()'를 호출하면이 작업이 이미 수행됩니다. 브라우저는 입력마다 마지막 커서/선택 위치를 기억하고 다시 포커스를 맞 춥니 다.

IE에서 재생성하는 것은 매우 까다로운 작업입니다. 커서/선택 영역이 어디에 있는지 확인하기 위해 항상 폴링해야하고, 입력 요소에 있었던 경우 해당 위치를 기억한 다음 버튼을 눌렀을 때 특정 요소의 위치를 ​​가져 와서 복원해야합니다. 여기에는 'document.selection.createRange()'에 대한 매우 지루한 조작이 포함됩니다.

jQuery에서이 작업을 수행하는 데 도움이되는 내용을 모르지만 어딘가에 플러그인이있을 수 있습니다.

Answer 2

xgMz의 대답은 저에게 가장 좋습니다. 당신은 브라우저에 대해 걱정할 필요가 없습니다 :

var html = $("#MyTextArea").val(); 
$("#MyTextArea").focus().val("").val(html); 

를 그리고 여기 나를 위해 다음에 이렇게 썼다 빠른 jQuery를 확장입니다 :

; (function($) { 
    $.fn.focusToEnd = function() { 
     return this.each(function() { 
      var v = $(this).val(); 
      $(this).focus().val("").val(v); 
     }); 
    }; 
})(jQuery); 

사용과 같은 :

$("#MyTextArea").focusToEnd(); 

은

Answer 3

이것은 내 onclick 또는 다른 이벤트 내에서 textareas에 사용하는 것으로 FireFox 및 IE 7 &에 대해서는 정상적으로 작동하는 것으로 보입니다. 커서가 정면이 아닌 텍스트 끝에 위치합니다.

this.value = "some text I want to pre-populate"; 
this.blur(); 
this.focus(); 

Answer 4

마우스 포커스를 설정하고 입력 끝으로 커서를 이동하십시오. 모든 브라우저에서 작동하며, 여기에있는 단순한 논리입니다.

input.focus(); 
tmpStr = input.val(); 
input.val(''); 
input.val(tmpStr); 

Answer 5

당신은 또한이 작업을 수행 할 수있는이 https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd(); 

Answer 6

을 사용할 수

$(document).ready(function() 
{ 
    var el = $("#myInput").get(0); 

    var elemLen = el.value.length; 

    el.selectionStart = elemLen; 
    el.selectionEnd = elemLen; 

    el.focus(); 
});​ 

이 코드는 input 및 textarea 모두 작동합니다. 최신 브라우저 인 Firefox 23, IE 11 및 Chrome 28에서 테스트되었습니다.여기에 해당

jsFiddle : http://jsfiddle.net/cG9gN/1/

출처 : https://stackoverflow.com/a/12654402/114029

Answer 7

내가 조금 나는 그것을 읽은 더러운 느낌이 기본값

; (function($) { 
    $.fn.focusToEnd = function(defaultValue) { 
     return this.each(function() { 
      var prevValue = $(this).val(); 
      if (typeof prevValue == undefined || prevValue == "") { 
       prevValue = defaultValue; 
      } 
      $(this).focus().val("").val(prevValue); 
     }); 
    }; 
})(jQuery); 

// See it in action here 
$(element).focusToEnd("Cursor will be at my tail...");