Mar*_*B29 199 html javascript jquery
如何从输入字段中获取插入位置？
我通过谷歌发现了一些零碎的东西,但没有任何防弹措施.
基本上像jQuery插件这样的东西是理想的,所以我可以简单地做
$("#myinput").caretPosition()
bez*_*max 233
更新更容易:
使用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;
}
Mar*_*B29 117
很好,非常感谢Max.
如果有人想使用它,我已经将他的答案中的功能包装到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);
Com*_*ode 78
使用selectionStart,它与所有主流浏览器兼容.
document.getElementById('foobar').addEventListener('keyup', e => {
console.log('Caret at: ', e.target.selectionStart)
})<input id="foobar" />更新:仅当未定义类型或输入时键入="text"时才有效.
Raj*_*aul 26
有一个非常简单的解决方案.尝试以下代码并验证结果 -
<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>
我给你fiddle_demo
Geo*_*rge 14
(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);
pmr*_*ule 10
这里有一些很好的答案,但我认为你可以简化代码并跳过检查inputElement.selectionStart支持:仅在IE8及更早版本(参见文档)上不支持它,它代表当前浏览器使用率的不到1%.
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);
}
| 归档时间： |
|
| 查看次数： |
242474 次 |
| 最近记录： |