How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters?
HTML
<input type="number" name="cost" value="0.00" />
JavaScript
$.fn.setCursorPosition = function (pos) {
this.each(function (index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
$('input[name=cost]').click(function() {
$('input[name=cost]').setCursorPosition(55);
});
EDIT:
Upon further investigation, it appears that Chrome does not support this functionality with the number type. Is there a cross-browser workaround that doesn't involve changing the type to text?
EDIT 2:
After extensive research, it seems there is no solution to getting this to work with the number type. Why do browser manufacturers impose these limitations? Perhaps we should consider using pseudo-elements for all our elements just to challenge them, especially Google, and disrupt their precious search algorithm.