Сделайте части входного значения только для чтения

Question

Если значение моего input является датой

03/22/2012

и я хочу, чтобы числа были редактируемыми, но не /, могу ли я сделать эту часть input доступной только для чтения?

Я бы хотел сделать это без плагинов.

Answer 1

Я мог бы сделать что-то подобное, используя только CSS:

div#dateInput{
    border:1px solid #999;
    width:100px;
    margin:1em;
}

div#dateInput input{
    border:0;
    width:20px;
    outline:0;
}

div#dateInput input:nth-last-child(1){
    border:0;
    width:35px;
    outline:0;
}​

HTML

<div id="dateInput">
    <input type="text" /> /
    <input type="text" /> /
    <input type="text" />
</div>​

Пример: http://jsfiddle.net/Qy6BG/

По сути, я удаляю границу и контур из трех input полей и "скрываю" эти поля в div, который я стилизую, чтобы выглядеть как один input.

Answer 2

Да, вы можете проверить в обработчике onchange, удален ли /, и вы можете вернуть его обратно, создавая впечатление, что редактировать могут только значения между /.

Второй альтернативой будет использование 3 полей, разделенных /, но это довольно уродливое решение, но, вероятно, наиболее реализованное.