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

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

html

Html 仅使输入字段的一部分不可编辑,html,input-field,Html,Input Field,我在网上做了一些搜索，还没有找到任何具体的答案。是否可以有一个文本字段，其中包含不可编辑的默认文本例如，假设我需要一个用户输入一个电话号码。他们看到的是： Input Phone Number: ***-***-**** 他们可以编辑任何他们想要的星星。但是，即使字段完全为空，也不应该删除破折号。我看到了输入区域的readonly和disabled标记，但是这些标记使整个字段被禁用我希望用户能够输入信息，而无需更改我在输入字段中设置的默认字符下面是一些虚拟代码，如果您需要它来进行实

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

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

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>


电话号码输入：

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

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

另一种选择是（可能是混乱的）JavaScript解决方案，您必须跟踪按键和光标位置。

纯HTML/CSS是不可能的。为此，您需要一些Javascript。有一些很好的JS插件支持这个功能。我通常和他一起工作。您将拥有额外的功能，限制您的用户只输入数字（或任何您想要的）

它们都依赖于jQuery，但如果您能胜任的话，您当然可以用javascript编写自己的解决方案

建议使用3种不同的输入，并将其样式设置为一个大输入，这在我看来并不是最好的解决方案。用户将不得不切换字段（通过鼠标或选项卡），这将造成混乱，因为它看起来像一个字段。可怕的UX！您可以添加一些JS来自动切换字段，但如果您要使用JS，我会选择输入掩码。我还没有谈到在服务器端处理3个字段的额外工作…

您可以创建一个类似以下内容的假输入：

<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>


fakeInput先生{
背景色：#FFFFFF；
边框：1px实心#中交；
边界半径：5px；
填充：3倍；
宽度：300px；
}
.fakeInput span{
左边距：10px；
}
输入电话号码：123-456-7890

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

电话号码应允许读取，允许使用“-”和“”等分隔符，但不需要。这会对处理数据造成挑战，但不会造成问题中所述的问题。尝试对用户输入强制使用严格的格式不是一个好主意，特别是如果格式不符合国际ITU-T建议（建议使用空格而不是连字符作为分隔符）。