Question

我们可以使用默认值显示文本框的一部分是只读的吗？

我想在文本框中显示一个前面有两个零的数字，并且两个零必须不可编辑。

Answer 1

不可能将文本框部分只读（至少使用纯css和html）而不是部分。但是你可以做一些类似于twitter bootstrap的方法，只需将背景颜色改为白色，使它看起来像是一个输入。

<强> HTML：

  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
  </div>

替换

.input-group { width:50%; } .input-group .form-control { border-right:none; } .input-group .input-group-addon { background-color:#fff; border-left:none; }

<强>小提琴：

http://jsfiddle.net/QJu3y/2/

<强>自举：

http://getbootstrap.com/components/#input-groups-basic

Answer 2

你可以这样做。每次更改值时，只需检查两个零是否在值的开头，如果没有，请将它们重新添加。

使用Javascript：

function zOnChange()
{
    var ele = document.getElementById('zeronumber');
    var value = ele.value;
    if( value.substring(0,2)!='00' )
    {
        if( value.substring(0,1)=='0')
        {
            ele.value = '0' + value;
        }
        else
        {
            ele.value = '00' + value;
        }
    }
}

HTML：

<input type='text' id='zeronumber' value='00' onChange='zOnChange()' onKeyUp='zOnChange()' />

我喜欢这个，因为与其他解决方案不同，您可以选择整个文本框并将其删除（但00会回来）。并且它不会破坏结束按钮，就像你在jsfiddle.net/Yt72H上获得的非常酷的解决方案一样。

Answer 3

以下是对类似问题的回答：Similar question

这是一个复杂的解决方法，但看起来工作得很好！

文本框的一部分只读默认值

3 个答案: