[jQuery제이쿼리] input 박스에 커서 이동시키기, focus()

홈페이가 열렸을 때, input 박스에 커서를 깜빡이게 하고 싶어서 찾아본 김에 정리합니다.

커서 이동 .focus()

제이쿼리로 커서 강제 이동은 focus()를 이용합니다.

아래처럼 3개의 input 박스가 있을 때,

<div>
    <label>Input 1</label>
    <input type="text" class="no-focus" name="input1">
</div>
<div>
    <label>Input 2</label>
    <input type="text" class="focused-input" name="input2">
</div>
<div>
    <label>Input 2</label>
    <input type="text" class="no-focus" name="input3">
</div>

홈페이지가 열리고 Input 2 라벨의 input 박스에 커서가 위치하게 하려면,

$(document).ready(function() {
  $('.focused-input').focus();
});

이런 식으로 .focus()를 이용하면 됩니다.

focus 해제

focus 해제는 blur()를 사용합니다.

// Example :
$('input').blur();

참조사이트

• https://api.jquery.com/focus/
• https://api.jquery.com/blur/