HTML input에 focus주고, 마지막 글자에 커서 위치
1. input 입력창의 자동 포커스 설정 방법
: input 태그의 속성으로 autofocus를 주면 된다.
<input type="text" id="input_01" value='input에 설정한 value' autofocus>
결과: 포커스된 커서가 맨 앞으로 간다.
2. input 커서를 텍스트 마지막으로 위치시키는 방법
원리는 동일하다. input 태그에 포커스를 주면서, value값을 새로 넣어주면 된다.
1) 첫번째 방법: input태그에 autofocus 설정된 경우.
const $input_01 = document.getElementById('input_01'); // input 태그 취득
$input_01.value = "js로 추가한 value"; // input 태그의 value에 새로운 값 설정
2) 두번째 방법: input태그에 autofocus 설정 안 한 경우.
const $input_01 = document.getElementById('input_01'); // input 태그 취득
$input_01.focus(); // 자바스크립트로 포커스 주기(autofocus 설정한 경우, 안 해도 된다.)
$input_01.value = "js로 추가한 value"; // input 태그의 value에 새로운 값 설정
결과: 포커스된 커서가 맨 뒤로 간다! 성공
전체 소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus control</title>
</head>
<body>
<!-- 1번째 input 태그: autofocus 설정 -->
<input type="text" id="input_01" autofocus>
<br><br>
<!-- 2번째 input 태그: 아무것도 설정 안함 -->
<input type="text" id="input_02">
<script>
// 1번째 input 태그 처리
const $input_01 = document.getElementById('input_01');
$input_01.value = "js로 추가한 value"; // 새로 value를 설정 해줘야 커서가 뒤로 간다.
// 2번째 input 태그 처리
const $input_02 = document.getElementById('input_02');
$input_02.focus(); // 여기까지만 하면 포커스가 맨 앞으로 간다.
$input_02.value = "js로 추가한 value"; // 여기 까지 해줘야 커서가 뒤로 간다.
</script>
</body>
</html>
댓글