使部分输入值只读

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个字段，但这是一种难看的解决方案，但可能是实施最多的。