텍스트 입력 필드 내에서 커서 위치(문자 단위)를 가져옵니다.
입력 필드 내에서 캐럿 위치를 가져오려면 어떻게 해야 합니까?
구글을 통해 몇 가지 조각들을 찾았지만 방탄은 없었습니다.
기본적으로 jQuery 플러그인 같은 것이 이상적이기 때문에 간단하게 할 수 있습니다.
$("#myinput").caretPosition()
간단한 업데이트:
사용하다field.selectionStart 예를 들어 보겠습니다.
이것을 지적해 주신 @commonSenseCode 덕분입니다.
오래된 답변:
이 솔루션을 찾았습니다.jquery 기반은 아니지만 jquery에 통합하는 데는 문제가 없습니다.
/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {
// Initialize
var iCaretPos = 0;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart('character', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;
// Return results
return iCaretPos;
}
사용하다selectionStart모든 주요 브라우저와 호환됩니다.
document.getElementById('foobar').addEventListener('keyup', e => {
console.log('Caret at: ', e.target.selectionStart)
})<input id="foobar" />이 기능은 유형이 정의되지 않은 경우에만 작동합니다.type="text"또는type="textarea"입력으로.
bezmax의 답변에 있는 기능을 jQuery로 정리했습니다.
(function($) {
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if ('selectionStart' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
return sel.text.length - selLen;
}
}
})(jQuery);
매우 간단한 해결책이 있습니다.다음 코드를 테스트하여 결과를 확인합니다.
<html>
<head>
<script>
function f1(el) {
var val = el.value;
alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
<button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>
바이올린을 주겠다.
이제 이를 위한 멋진 플러그인이 있습니다.캐럿 플러그인
그러면 다음 방법으로 그 자리를 얻을 수 있습니다.$("#myTextBox").caret()또는 를 통해 설정한다.$("#myTextBox").caret(position)
(function($) {
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if (document.selection) {
// IE
input.focus();
}
return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
}
})(jQuery);
여기에 몇 가지 좋은 답변이 게시되어 있지만 코드를 단순화하고 다음 항목에 대한 검사를 건너뛸 수 있습니다.inputElement.selectionStart지원: 현재 브라우저 사용량의 1% 미만인 IE8 이전 버전(문서 참조)에서만 지원되지 않습니다.
var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;
// and if you want to know if there is a selection or not inside your input:
if (input.selectionStart != input.selectionEnd)
{
var selectionValue =
input.value.substring(input.selectionStart, input.selectionEnd);
}
커서 위치 외에 선택한 범위가 필요할 수 있습니다.다음은 jQuery가 필요 없는 간단한 기능입니다.
function caretPosition(input) {
var start = input[0].selectionStart,
end = input[0].selectionEnd,
diff = end - start;
if (start >= 0 && start == end) {
// do cursor position actions, example:
console.log('Cursor Position: ' + start);
} else if (start >= 0) {
// do ranged select actions, example:
console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
}
}
예를 들어, 입력이 변경되거나 마우스가 커서 위치를 이동할 때마다 호출한다고 가정해 보겠습니다(이 경우 jQuery를 사용합니다)..on()퍼포먼스상의 이유로 추가가 권장될 수 있습니다.setTimeout()또는 밑줄과 같은 것_debounce()이벤트가 쇄도하는 경우:
$('input[type="text"]').on('keyup mouseup mouseleave', function() {
caretPosition($(this));
});
const inpT = document.getElementById("text-box");
const inpC = document.getElementById("text-box-content");
// swch gets inputs .
var swch;
// swch if corsur is active in inputs defaulte is false .
var isSelect = false;
var crnselect;
// on focus
function setSwitch(e) {
swch = e;
isSelect = true;
console.log("set Switch: " + isSelect);
}
// on click ev
function setEmoji() {
if (isSelect) {
console.log("emoji added :)");
swch.value += ":)";
swch.setSelectionRange(2,2 );
isSelect = true;
}
}
// on not selected on input .
function onout() {
// الافنت اون كي اب
crnselect = inpC.selectionStart;
// return input select not active after 200 ms .
var len = swch.value.length;
setTimeout(() => {
(len == swch.value.length)? isSelect = false:isSelect = true;
}, 200);
}<h1> Try it !</h1>
<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title">
<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box-content" size="20" value="content">
<button onclick="setEmoji()">emogi :) </button>해결책은.selectionStart:
var input = document.getElementById('yourINPUTid');
input.selectionEnd = input.selectionStart = yourDESIREDposition;
input.focus();
한다면.selectionEnd는 할당되지 않습니다.일부 텍스트(S-->E)가 선택됩니다.
.focus()포커스가 손실된 경우, 코드를 트리거할 때(onClick) 필수입니다.
나는 이것을 크롬으로만 테스트했다.
더 복잡한 해결책을 원한다면 다른 답을 읽어야 합니다.
언급URL : https://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
'sourcecode' 카테고리의 다른 글
| MariaDB에서 MySQL로의 이행 (0) | 2022.09.23 |
|---|---|
| SQL 구문에 오류가 있습니다. 올바른 구문은 MariaDB 서버 버전에 해당하는 설명서를 참조하십시오. (0) | 2022.09.23 |
| bcmath 모듈 설치 방법 (0) | 2022.09.23 |
| 텍스트 파일에 작성 또는 쓰기/추가 (0) | 2022.09.23 |
| JAR 파일 내의 파일을 나열하려면 어떻게 해야 합니까? (0) | 2022.09.23 |