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

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

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

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>

最佳答案

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

<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 中读取值。

关于html - 仅使输入字段的一部分不可编辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17842461/