Question

我在网上做了一些狩猎，还没有找到任何具体的答案。是否可以有一个文本字段，其中的默认文本是不可编辑的？

例如，假设我需要用户输入电话号码。他们看到的是：

Input Phone Number: ***-***-****

他们可以编辑他们想要的任何星星。但是，即使该字段完全是空的，也不应该删除破折号。我已经看到输入区域的readonly和disabled标记，但这些标记会禁用整个字段。

我希望用户能够输入信息，而不会将我设置的默认字符更改为输入字段。

如果你需要它来试验，这里有一些虚拟代码：

<!doctype HTML>
<html>
<body>
    <section>
         <article>
             <label>Phone Number Entry: </label>
             <input type="tel" name="phone" placeholder="123-456-7890" 
                                        onkeypress='eval(event)' required/>
          </article>
     </section>
</body>
</html>

Answer 1

您可以创建类似于以下内容的虚假输入：

<style>
    .fakeInput{
        background-color:#FFFFFF;
        border:1px solid #CCCCCC;
        border-radius:5px;
        padding:3px;
        width:300px;
    }

    .fakeInput span{
        margin-left:10px;
    }
</style>
<p class="fakeInput">Input Phone Number:<span contentEditable="true" onfocus="this.innerHTML=''">123-456-7890</span></p>

然后单击某个元素，从DOM中读取值。

Answer 2

只是一个建议，但您可以为可编辑区域使用3个单独的文本输入，并使用一些CSS使它们显示为单个输入。然后可能是一个隐藏的输入来保存完整的值，这是必要的。

替代方案是（可能是凌乱的）JavaScript解决方案，您必须跟踪键击和光标位置。

Answer 3

输入不支持禁用部分区域。您必须使用onkeyup和一些JavaScript代码来检查输入框并在更改时替换内容。

Answer 4

纯HTML / CSS无法实现。你需要一些Javascript。有一些很好的JS插件支持这个功能。我通常使用meiomask或inputmask。您将拥有限制用户仅输入数字（或任何您想要的数字）的附加功能

他们都依赖于jQuery，但如果你愿意，你可以用javascript编写自己的解决方案。

使用3种不同输入的建议方式，并将它们设置为一个大输入并不是IMO的最佳解决方案。用户将不得不切换字段（通过鼠标或制表符），这将导致混淆，因为它看起来像一个字段。可怕的用户体验！你可以添加一些JS来自动切换字段，但是如果你要使用JS我会去输入掩码。我还没有谈到在服务器端处理3个字段的额外工作......

仅使输入字段的一部分不可编辑

4 个答案: