js는 예제를 공유하기 위해 입력 상자의 지정된 위치에 커서를 배치합니다.

친숙한 사용자 인터페이스를 제공할 때 입력 상자의 지정된 위치에 커서를 배치해야 하는 경우가 종종 있습니다. 일반적으로 꼬리는 사용자가 계속해서 정보를 입력할 수 있도록 하기 위한 것입니다. 이를 달성하기 위해 javascriptoperationdom을 사용할 수 있습니다. 다음은 구현 방법입니다

   function changeCursor(input, position) {   
2.             var range = input.createTextRange();   
3.             range.collapse(true);   
4.             range.moveStart('character', position);   
5.             range.select();   
6.       }  
7.       //在需要的地方调用此函数，比如 
8.       onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) {  
      var range = input.createTextRange();  
      range.collapse(true);  
      range.moveStart('character',position);  
      range.select();  
}

//필요한 경우

onfocus="positionCursor( this ,this.length)"

여기서 createTextRange 는 요소에 대한 TextRange 개체

다음 표에는 TextRange 개체의 속성과 메서드가 나열되어 있습니다. 또한 w3c
methoddescription 문서를 참조할 수 있습니다.
종료점 비교 : 비교 TextRange 객체의 끝점과 다른 범위의 끝점입니다.
duplicate : TextRange 의 복사본을 반환합니다.
execCommand : 현재 문서, 현재 선택 항목 또는 지정된 범위에 대해 명령을 실행합니다.
expand : 지정된 단위의 범위를 완전히 포함하도록 범위를 확장합니다.
findText : 텍스트 내의 텍스트를 검색하고 검색 문자열을 둘러싸도록 범위의 시작 및 끝 지점을 설정합니다.
getBookmark: moveToBookmark 동일한 범위를 반환 (흰색 문자열)으로 만드는 데 사용할 수 있는 북마크를 가져옵니다.
getBoundingClientRect: 지정된 TextRectangle 개체 컬렉션에 바인딩된 개체를 가져옵니다.
getClientRects: 클라이언트 영역 내 개체 또는 레이아웃의 내용을 설명하는 직사각형 컬렉션을 가져옵니다. 각 직사각형은 직선을 나타냅니다.
inRange : 범위가 다른 범위에 포함되어 있는지 여부를 반환합니다.
isEqual : 지정된 범위가 현재 범위와 같은지 여부를 반환합니다.
move : 주어진 텍스트 범위를 축소하고 빈 범위를 주어진 단위 수만큼 이동합니다.
moveEnd: 범위의 끝 위치를 변경합니다.
moveStart : 범위의 시작 위치를 변경합니다.
moveToBookmark: 북마크로 이동합니다.
moveToElementText: 범위의 시작 및 끝 위치에 지정된 요소의 텍스트가 완전히 포함되도록 텍스트 범위를 이동합니다.
moveToPoint : 텍스트 범위의 시작 및 끝 위치를 지정된 지점으로 이동합니다.
parentElement : 지정된 텍스트 범위의 상위 요소를 가져옵니다.
pasteHTML : HTML 텍스트를 지정된 텍스트 범위에 붙여넣고 해당 범위의 이전 텍스트와 HTML 요소를 바꿉니다.
queryCommandEnabled: 지정된 명령이 해당 문서의 현재 상태에서 사용될 수 있는지 여부를 나타내는 부울 값을 반환합니다. execCommand 명령이 성공적으로 실행되었습니다.
queryCommandIndeterm : 지정된 명령이 모호한 상태인지 여부를 나타내는 부울 값을 반환합니다.
queryCommandState : 명령의 현재 상태를 나타내는 Boolean 값을 반환합니다.
queryCommandSupported: 현재 명령이 현재 로케일에서 지원되는지 여부를 나타내는 부울 값을 반환합니다.
queryCommandValue: 주어진 명령에 대한 문서, 범위 또는 현재 선택 항목의 현재 값을 반환합니다.
scrollIntoView: 개체를 가시 범위로 스크롤하여 창 상단이나 하단에 정렬합니다.
select : 현재 선택 영역을 현재 개체로 설정합니다.
setEndPoint: 다른 범위의 끝점을 기반으로 범위의 끝점을 설정합니다.

PropertyDescription
boundingHeight: TextRange 개체에 바인딩된 직사각형의 높이를 가져옵니다.
boundingLeft : 경계 TextRange 개체의 사각형 왼쪽 가장자리와 포함하는 TextRange 개체의 왼쪽 가장자리 사이의 거리를 가져옵니다.
boundingTop : 경계 TextRange 개체의 위쪽 가장자리와 포함하는 TextRange 개체의 위쪽 가장자리 사이의 거리를 가져옵니다.
boundingWidth ：TextRange 개체의 경계를 이루는 직사각형의 너비를 검색합니다.
htmlText ：TextRange 개체의 경계를 이루는 사각형의 너비를 가져옵니다. offsetLeft :
offsetParent 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 개체의 왼쪽 위치를 가져옵니다. offsetTop :
offsetTop 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 개체의 상단 위치를 가져옵니다. text : 범위에 포함된 텍스트를 설정하거나 가져옵니다.
관련 권장 사항:

입력 입력 상자에서 일관되지 않은 커서 크기 표시를 해결하는 방법

CSS를 사용하여 입력 커서 방법 숨기기

JavaScript 사용자 정의 텍스트 상자 커서 코드 세부 정보

위 내용은 js는 예제를 공유하기 위해 입력 상자의 지정된 위치에 커서를 배치합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!