bewmar bewmar - 6 months ago 18
CSS Question

HTML input number moves cursor off center when typing letters

With an

<input type="number">
field that is styled with
text-align: center
, it works perfectly with numerical input but will move the cursor to the left of the input field if given an alphanumeric character (although it is not displayed).

JsFiddle: http://jsfiddle.net/jbe55o0g/

How can this be prevented such that the cursor remains in the center?

Answer

When you are using <input type="number"> for numbers only, then you can allow only numeric input using javascript. now the cursor remains in the center :

input[type=number]{
    width: 100px;
    text-align:center;
}
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>