JavaScript를 사용하여 텍스트 입력 필드의 텍스트 끝에 커서를 배치하는 방법은 무엇입니까?

HTML에서 입력 필드는 사용자로부터 입력을 받는 데 사용됩니다. 때로는 입력에 문자열이나 긴 텍스트 메시지를 가져와야 하는 경우가 있습니다. 이러한 시나리오에서는 사용자가 더 많은 콘텐츠나 메시지를 추가하기 위해 입력 필드의 끝으로 이동해야 할 수도 있습니다. 따라서 사용자가 버튼을 클릭하고 입력 필드의 끝으로 이동할 수 있도록 무언가를 설정해야 합니다. 이 튜토리얼에서는 JavaScript를 사용하여 입력 필드의 텍스트 끝에 커서를 배치하는 방법을 배웁니다.

setSelectionRange() 메소드 사용

setSelectionRange() 메서드는 입력 필드에서 텍스트를 선택하는 데 사용됩니다. 선택을 시작하고 종료하려면 두 개의 매개변수가 필요합니다. setSelectionRange() 메서드를 사용하여 마지막 문자를 선택하고 커서를 텍스트 끝에 놓을 수 있습니다.

문법

사용자는 다음 구문에 따라 setSelectionRange() 메서드를 사용하여 커서를 텍스트 끝에 배치할 수 있습니다.

으아아아

위 구문에서 입력은 JavaScript에서 액세스하는 HTML 요소입니다. "len"은 입력 값의 길이입니다.

예

아래 예에서는 입력 필드와 버튼을 만들었습니다. 사용자가 버튼을 클릭하면 moveAtend() 함수가 실행됩니다.

JavaScript에서는 "이름" 입력 필드에 액세스하는 moveAtend() 함수를 정의했습니다. 그런 다음 focus() 메서드를 사용하여 입력 필드에 포커스를 설정합니다. 그런 다음 입력값의 길이를 두 개의 매개변수로 전달하여 setSelectionRange() 메서드를 사용합니다. 출력에서 사용자는 버튼을 클릭하고 커서 위치가 텍스트 끝으로 설정되는 것을 볼 수 있습니다.

으아아아

selectionStart 및 SelectionEnd 속성 사용

"selectionStart" 및 "selectionEnd" CSS 속성은 입력 필드에서 입력 값을 선택하는 데 사용됩니다. "selectionStart"는 선택을 시작한 위치에서 인덱스 값을 가져오고, "selectionEnd"는 텍스트 선택을 종료해야 하는 위치의 인덱스 값을 가져옵니다.

여기서 "selectionStart" 및 "selectionEnd" 속성의 값을 텍스트 길이와 동일하게 설정하여 커서를 텍스트 끝에 배치할 수 있습니다.

문법

사용자는 "selectionStart" 및 "selectionEnd" 속성을 사용하여 다음 구문을 사용하여 텍스트 끝에 커서를 배치할 수 있습니다.

으아아아

위 구문에서 입력은 HTML 요소이고 'len'은 해당 값의 길이입니다.

예

첫 번째 예시와 마찬가지로 아래 예시에서도 입력 필드를 생성합니다. moveAtend() 함수에서 "selectionStart" 및 "selectionEnd" 속성의 값을 "name" 입력 필드의 텍스트 길이와 동일하게 설정합니다.

으아아아

결론

입력 필드의 텍스트 값 끝에 커서를 위치시키는 두 가지 방법을 배웠습니다. 첫 번째 방법에서는 setSelectionRange() 메서드를 사용했고 두 번째 방법에서는 "selectionStart" 및 "selectionEnd" 속성을 사용했습니다. 그러나 두 방법 모두 거의 동일하며, setSelectionRange() 메서드는 "selectionStart" 및 "selection" 종료 값을 매개변수로 사용합니다.

위 내용은 JavaScript를 사용하여 텍스트 입력 필드의 텍스트 끝에 커서를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!