JavaScript에서 커서 위치 가져오기
-
selectionStart및selectionEnd속성을 사용하여 커서 위치 가져오기 -
screenX/Y속성을 사용하여 커서 위치 가져오기 -
clientX/Y를 사용하여 커서 위치 가져오기 -
pageX/Y속성을 사용하여 커서 위치 값 가져오기
JavaScript는 기본 위치 속성인 selectionStart 및 selectionEnd와 통합되어 문자열 리터럴의 0th 인덱스에서만 위치 값을 검색할 수 있습니다. 다른 속성들도 좌표 표시를 기준으로 위치 값을 추출하는 데 중요한 역할을 합니다.
이 경우 기준점은 다를 수 있으므로 프레임마다 다른 값이 생성됩니다. 다음 섹션에서는 selectionStart 및 selectionEnd 속성의 예를 보여줍니다.
세 가지 속성이 좌표계를 기반으로 하는 screenX/Y, clientX/Y 및 pageX/Y의 작동 원리도 고려할 것입니다. 하지만 먼저 본론으로 들어가 봅시다!
selectionStart 및 selectionEnd 속성을 사용하여 커서 위치 가져오기
selectionStart 및 selectionEnd 속성은 읽기/쓰기 속성입니다. 위치 값으로 정의하거나 읽기 작업을 수행하는 기본값을 사용할 수 있습니다.
또한 selectionStart 및 selectionEnd 값을 명시적으로 가져와 하위 문자열의 특정 범위를 파악하는 getSelectionRange 속성도 있습니다. 문자열을 가지고 노는 것은 일부 특정 속성에서만 작동하기 때문에 제한됩니다.
예를 들어 input:text, input:textarea, input:password 등이 있습니다. 이 특정 문서에서 더 자세한 측면을 가질 수 있습니다. 여기에 설명된 인스턴스에서는 selectionStart에 대한 읽기 전용 메서드만 보여줍니다.
읽기 전용 규칙에 대해 이야기할 때 selectionStart 및 selectionEnd는 유사하게 수행됩니다. 커서가 통과한 문자열 문자의 위치를 인쇄합니다.
정확히 말하면 커서는 이러한 속성이 작동하는 텍스트 유형 커서입니다. 따라서 가로 부분의 위치만 가져오고 계산은 문자 수에 따라 달라집니다. 어떻게 작동하는지 확인해 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get Cursor</title>
</head>
<body>
<input id="Javascript_example" name="one" type="text" value="Javascript example" onmousemove="textbox()">
<p id="vals"></p>
<script>
function textbox(){
var ctl = document.getElementById('Javascript_example');
var startPos = ctl.selectionStart;
document.getElementById('vals').innerText = startPos;
}
</script>
</body>
</html>
출력:
여기서 selectionEnd는 유사하게 수행되므로 미리 보기를 추가하지 않았습니다. selectionStart 속성과 동일한 결과를 시도하고 볼 수 있습니다. 이러한 속성의 읽기 전용 섹션입니다.
screenX/Y 속성을 사용하여 커서 위치 가져오기
screenX/Y 속성의 경우 기준점이 참조하는 위치를 계산합니다. 좌표 값은 위치를 표시하기 위해 특정 참조 지점을 엄격하게 따릅니다.
여기서 커서 위치는 default 커서입니다. 따라서 onmousemove 속성을 사용하여 위치를 추적합니다. screenX/Y는 읽기 전용 속성이며 참조 지점을 전역 또는 전체 화면 좌표로 따릅니다. 아래의 예를 확인해보자.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Screen X/Y: ${e.screenX}, ${e.screenY}`;
}
</script>
</html>
출력:
보시다시피 커서의 이동 위치에서 좌표 값이 업데이트됩니다. 또한 한 섹션에서 스크롤이 커서의 위치에 영향을 미치지 않는다는 것을 알 수 있습니다.
즉, 페이지가 상하 또는 좌우로 스크롤될 때마다 전체 페이지가 정지되고 화면 크기를 고려하여 해당 프레임 인스턴스의 위치를 계산합니다.
clientX/Y를 사용하여 커서 위치 가져오기
clientX/Y는 참조 지점을 뷰포트로 사용하는 읽기 전용 속성이기도 합니다. 이와 관련하여 스크롤 업 다운 뷰포트는 동상을 유지하고 좌표 값을 측정합니다.
보다 명확하게는 페이지의 상단 섹션에 있는 경우 y 값은 0입니다. 그리고 20픽셀까지 아래로 스크롤했으며 y 값을 검색하려고 하면 여전히 0으로 표시됩니다.
그것은 어떤 부분이 뷰포트를 점유하고 있는지를 의미하며, 그 부분만 고려됩니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Client X/Y: ${e.clientX}, ${e.clientY}`;
}
</script>
</html>
출력:
따라서 페이지의 최상위 value(y)를 확인한 부분에서 결과는 0입니다. 그리고 조금 아래로 스크롤하면 값이 0으로 유지됩니다. 따라서 x축 값에 대해 유사한 작업을 수행할 수 있습니다.
pageX/Y 속성을 사용하여 커서 위치 값 가져오기
screenX/Y 및 clientX/Y와 마찬가지로 pageX/Y도 읽기 전용 속성입니다. 그러나 이러한 속성과 달리pageX/Y는 값을 계산할 때 전체 페이지의 크기를 고려합니다.
즉, 표시 영역의 길이가 화면에 표시되는 표시 영역보다 길면 속성이 전체 페이지의 전체 차원에 대해 계산됩니다. 따라서 이 속성을 통해 중요한 섹션이나 커서 위치를 보다 직관적으로 가져올 수 있습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `Page X/Y: ${e.pageX}, ${e.pageY}`;
}
</script>
</html>
출력:
시각화할 수 있듯이 스크롤바를 스크롤하지 않았을 때 y축의 상단 위치 값은 0이었습니다.
그리고 조금 아래로 스크롤하면 상단에 아래로 스크롤된 픽셀 수인 y 값이 표시되며 58입니다. 이제 작업 목적에 따라 어떤 속성이 더 적합한지 비교 논의를 진행할 수 있습니다.
