커서가 텍스트의 맨 뒤에 놓인 상태로 지정하기

출처 - 하타노 후토미, 『사전처럼 바로 찾아 쓰는 HTML5 핵심 API(초판)』, pp. 180 ~ 182

HTML

<form name="" id="" method="post" action="#">
  <fieldset>
    <legend>커서가 텍스트의 맨 뒤에 놓인 상태로 지정하기</legend> 
    <label for="txt">텍스트 선택<label>
    <input type="text" name="txt" id="txt" value="가나다라마바사아자차" autofocus="autofocus"> 
  </fieldset>
</form>

JavaScript

// addEventListener()함수가 구현되어 있지 않으면 함수 실행을 종료합니다.
if(!document.addEventListener){return;} 
// Selectors API가 구현되어 있지 않으면 함수 실행을 종료합니다.
if(!document.querySelector){return;}
  
var input = document.querySelector("input[name='txt']"); 

// input[name='txt'] 요소에 focus 이벤트 리스너를 지정합니다.
input.addEventListener("focus", function(event){ 
  var el = event.target; 
  // 커셔를 맨뒤로 이동합니다.
  el.selectionStart = el.value.length; 
}, false); 
  
if(input.autofocus == true){ 
  input.selectionStart = input.value.length; 
}