Currently the only elements that allow text selection safely are:
<input type="text|search|password|tel|url"> as described in:
whatwg: selectionStart attribute.
You can also read the documentation for the HTMLInputElement interface to take a closer look of the input elements.
To overcome this "issue" safely, the best for now is deal with an <input type="text"> and apply a mask/constraint that accept only numbers. There are some plugins around that satisfy the requirement:
You can see a live demo of one of the previous plugins here:
If you want to use safely selectionStart, then you can check for those elements that support it (see input type attributes)
Implementation
// 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;
}
Usage
// 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);
The above example can be found here: jsu.fnGetCaretPosition()
