CODEWITHSUNDEEP
javascriptjqueryhtml
Darkrum
Darkrum

Reputation: 1383

How to move caret in <input type="number">?

So I'm trying to get the caret to move when the input is clicked. The code I've found works when the input type is text. But when you set it as number - it does not work. Also how would I get it to pass the length without declaring a value (i.e. 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:

Did some digging and found out that chrome does not let you do this with number... Does anyone know of a work around that's cross browser and that doesn't require the type to be switched to text?

EDIT 2:
Well after a lot of searching it looks like there is no workaround to get this to work with type number. I don't get it. Why do browser manufactures do this? I swear we should start making all are elements pseud elements just to piss them off. Especially Google, that would cause havoc on there precious little search algorithm

Upvotes: 3

Views: 1879

Answers (1)

Phil Ricketts
Phil Ricketts

Reputation: 8710

Try working around it by changing the input's type attribute to text on keydown, and back to number on keyup.

A little hacky, but will solve the problem.

Upvotes: 2

Related Questions