프로그래밍 방식으로 텍스트 상자에 키보드 캐럿을 배치하려면 어떻게 해야 합니까?

텍스트 상자에서 키보드 캐럿 위치 지정 기술

키보드 캐럿을 텍스트 상자 내 특정 위치로 이동하면 사용자 상호 작용 및 편집 기능이 향상될 수 있습니다. 능률. 이를 달성하기 위해 다양한 방법을 사용할 수 있습니다.

일반 캐럿 위치 지정 함수

Josh Stodola의 기사에서 발췌한 다음 함수는 캐럿 위치를 설정하는 다양한 솔루션을 제공합니다. 텍스트 상자와 텍스트 영역 모두:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if (elem != null) {
        if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else {
            if (elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            } else
                elem.focus();
        }
    }
}

이 함수는 두 가지 매개변수, 즉 텍스트 상자의 ID를 사용합니다. 대상 요소와 원하는 캐럿 위치. 캐럿 위치로 0을 전달하면 텍스트의 시작 부분으로 설정되고 요소 값의 길이를 초과하면 끝 부분에 배치됩니다.

사용 예

제공된 예제는 키보드 캐럿이 수신될 때 페이지의 모든 텍스트 영역 끝으로 강제로 이동하는 방법을 보여줍니다. focus:

function setTextAreasOnFocus() {
    var textAreas = document.getElementsByTagName('textarea');

    for (var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

이 코드는 포커스를 받는 모든 텍스트 영역의 끝에 캐럿을 효과적으로 배치하여 텍스트 편집 및 양식 완성을 용이하게 합니다.

위 내용은 프로그래밍 방식으로 텍스트 상자에 키보드 캐럿을 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!