7

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

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

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

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

我希望用户能够输入信息，而无需更改我在输入字段中设置的默认字符。

如果您需要进行试验，这里有一些虚拟代码：

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

4 回答 4

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>

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

于 2013-07-24T19:41:49.587 回答
1

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

另一种方法是（可能是混乱的）JavaScript 解决方案，您必须在其中跟踪击键和光标位置。

于 2013-07-24T19:25:01.813 回答
0

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

于 2013-07-24T18:53:46.083 回答
0

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

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

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

于 2013-07-24T19:34:08.327 回答