显示 开始搜索时按 Enter

Question

我有一个简单的搜索表单输入，我希望在用户在搜索表单中输入的任何内容之后显示文本 [Press Enter]。我在堆栈溢出上搜索无济于事。

  <form action="/search" method="GET">
    <input type="search" id="searchform" name="q" />
  </form>

Answer 1

您是否尝试过查看placeholder 功能？

<input type="search" id="searchform" name="q" placeholder="[Press Enter]" />

它将“幽灵文本”添加到可以输入的输入字段中。

如果您尝试在用户键入任何内容后附加“[Press Enter]”，您将遇到实际查询字符串的一些问题，除非您在某种帖子中专门删除了“[Press Enter]”字符串-提交处理。您可以在 JavaScript 中执行 on("change", ...) 事件侦听器来更新值，例如：

$("#searchform").on("change", function() {
  $(this).val($(this).val() + "[Press Enter]");
};

并添加一些超时检查，使其不会不断更新，但我认为使用占位符会更好。一旦用户第一次看到，我相信他或她会明白他或她应该按 Enter 键进行搜索。