禁用编辑文本输入的默认值

Question

我有一个搜索表单

<input id="price_from" value="price from ">
<input id="price_to" value="price to ">
<button>search</button>

如何禁用默认文本的编辑？当用户开始输入价格金额时，无法编辑“价格从”和“价格到”，但它们会留在输入字段中。我已经为 jquery 尝试了不同的掩码插件，但它们不会显示默认文本，直到您专注于字段并且不提供自定义文本选项。只有占位符和字符。

原文由 halofourteen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 readonly 或 disabled 属性。请注意，禁用时，提交表单时不会提交输入的值。

 <input id="price_to" value="price to" readonly="readonly">
<input id="price_to" value="price to" disabled="disabled">

原文由 chrki 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不认为所有其他回答者都正确理解了这个问题。该问题要求禁用编辑 部分文本。我能想到的一种解决方案是模拟一个带有 固定 前缀的文本框，该前缀不是文本区域或输入的一部分。

这种方法的一个例子是：

 <div style="border:1px solid gray; color:#999999; font-family:arial; font-size:10pt; width:200px; white-space:nowrap;">Default Notes<br/>
<textarea style="border:0px solid black;" cols="39" rows="5"></textarea></div>

我最终使用的另一种方法是使用 JS 和 JQuery 来模拟“禁用”功能。伪代码示例（不能是法律问题的具体原因）：

   // disable existing notes by preventing keystroke
  document.getElementById("txtNotes").addEventListener('keydown', function (e) {
    if (cursorLocation < defaultNoteLength ) {
            e.preventDefault();
  });

    // disable existing notes by preventing right click
    document.addEventListener('contextmenu', function (e) {
        if (cursorLocation < defaultNoteLength )
            e.preventDefault();
    });

谢谢 Carsten 提到这个问题已经过时了，但我发现该解决方案将来可能会帮助其他人。

原文由 Freddy Yang 发布，翻译遵循 CC BY-SA 3.0 许可协议