Номер HTML-ввода перемещает курсор от центра при вводе букв

Question

С полем <input type="number">, в стиле text-align: center, он отлично работает с цифровым вводом, но перемещает курсор влево от поля ввода, если ему задан буквенно-цифровой символ (хотя это не отображается).

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

Как это может быть предотвращено таким образом, что курсор остается в центре?

Answer 1

Когда вы используете <input type="number"> только для чисел, вы можете разрешить только числовой ввод с использованием javascript. Теперь курсор остается в центре:

input[type=number]{ 
 
    width: 100px; 
 
    text-align:center; 
 
}

<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Answer 2

Если вы используете JQuery, или готовы использовать, и не хотите быть сочинительства, что линия на все входы числа, вы можете использовать следующий код:

$(document.body).on('keypress',"input[type='number']", function(event){ 
    return event.charCode >= 48 && event.charCode <= 57; 
}) 

Это сделает тот же эффект, добавив атрибут OnKeyPress, фиксируя вопрос центра вы имеете.