bewmar bewmar - 1 year ago 84
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).


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

Answer Source

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 :

    width: 100px;
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>