36

我有一个搜索表格

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

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

4

5 回答 5

119

You can either use the readonly or the disabled attribute. Note that when disabled, the input's value will not be submitted when submitting the form. 

<input id="price_to" value="price to" readonly="readonly">
<input id="price_to" value="price to" disabled="disabled">
于 2012-12-04T11:39:04.177 回答
4

I'm not sure I understand the question correctly, but if you want to prevent people from writing in the input field you can use the disabled attribute.

<input disabled="disabled" id="price_from" value="price from ">
于 2012-12-04T11:41:39.617 回答
4

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

这种方法的一个例子是：

<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 提到这个问题很老，但我发现该解决方案可能会在未来帮助其他人。

于 2017-01-30T19:23:20.860 回答
1

可能是因为我不能很好地解释你并不真正理解我的问题。一般来说，我找到了解决方案。

对不起我的英语不好

于 2012-12-04T13:37:27.150 回答
0

怎么样disabled=disabled：

<input id="price_from" value="price from " disabled="disabled">​​​​​​​​​​​​

问题是如果您不希望用户编辑它们，为什么要在输入中显示它们？即使您想提交表单，也可以隐藏它们。而要显示信息，只需使用其他标签即可。

于 2012-12-04T11:42:09.297 回答