目前唯一允许安全选择文本的元素是:
<input type="text|search|password|tel|url">
如:
whatwg: selectionStart 属性中所述。
您还可以阅读HTMLInputElement 接口的文档以仔细查看输入元素。
为了安全地克服这个“问题”,目前最好的方法是处理<input type="text">
并应用只接受数字的掩码/约束。有一些插件可以满足要求:
您可以在此处查看之前插件之一的现场演示:
如果你想安全使用selectionStart
,那么你可以检查那些支持它的元素(参见输入类型属性)
执行
// Fix: failed to read the 'selectionStart' property from 'HTMLInputElement'
// The @fn parameter provides a callback to execute additional code
var _fixSelection = (function() {
var _SELECTABLE_TYPES = /text|password|search|tel|url/;
return function fixSelection (dom, fn) {
var validType = _SELECTABLE_TYPES.test(dom.type),
selection = {
start: validType ? dom.selectionStart : 0,
end: validType ? dom.selectionEnd : 0
};
if (validType && fn instanceof Function) fn(dom);
return selection;
};
}());
// Gets the current position of the cursor in the @dom element
function getCaretPosition (dom) {
var selection, sel;
if ('selectionStart' in dom) {
return _fixSelection(dom).start;
} else { // IE below version 9
selection = document.selection;
if (selection) {
sel = selection.createRange();
sel.moveStart('character', -dom.value.length);
return sel.text.length;
}
}
return -1;
}
用法
// If the DOM element does not support `selectionStart`,
// the returned object sets its properties to -1.
var box = document.getElementById("price"),
pos = getCaretPosition(box);
console.log("position: ", pos);
上面的例子可以在这里找到:jsu.fnGetCaretPosition()