JavaScript：如何通过按“Enter/Return”突出显示文本？答案

【问题标题】：JavaScript: How to highlight text with pressing "Enter/Return"?JavaScript：如何通过按“Enter/Return”突出显示文本？
【发布时间】：2013-07-09 12:43:26
【问题描述】：

我正在尝试创建一个功能正常的搜索框，以突出显示文本中的单词。但是，我无法通过按 Enter 进行搜索。您有什么建议吗？代码中的缺陷在哪里？谢谢！

HTML：

<form>
<input type="text" id="search" onkeypress="if (e.keycode==13) doSearch(document.getElementById('search').value)" placeholder="What are you looking for?">
</form>

JavaScript：

function doSearch(text)
{
if (window.find && window.getSelection)
   {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text))
      {
document.getElementById("search").blur();
document.execCommand("HiliteColor", false, "green");
sel.collapseToEnd();
      }
document.designMode = "off";
   }
else if (document.body.createTextRange)
   {
var textRange = document.body.createTextRange();
while (textRange.findText(text))
      {
textRange.execCommand("BackColor", false, "green");
textRange.collapse(false);
      }
   }
}

【问题讨论】：

您的具体问题是什么？
不能直接定义条件。你会得到 e 的定义吗？
@epoch：我的具体问题是当我按下回车键时它不进行搜索。如果我使用按钮和 onmousedown 命令，它确实可以工作，但我不能让它与 onkeypress 一起工作。
@DKM：当我在寻找解决方案时，每个答案都使用了这个“e.keycode”部分，所以我认为它属于那里......我想离开它是我的错误像这样。
@Zoldkabatos 看到我的回答你也可以这样做:)

标签： javascript onkeypress

【解决方案1】：

试试这样吧

  <input type="text" id="search" onkeypress="if (window.event.keyCode==13) doSearch(this.value);" placeholder="What are you looking for?">

不需要像在文本框中那样使用document.getElementbyId()，只需使用this.value。

Fiddle DEMO

【讨论】：

我的水平真的比猴子低很多:(jsfiddle.net/zoldkabatos/mQpGn
@Zoldkabatos 那个小提琴有什么问题？看到这个jsfiddle.net/mQpGn/1，你的代码在某处有异常。
如果我在您的代码中按 Enter，它不会突出显示输入的单词。如果它适合你，那是我的浏览器的问题。
这里对我不起作用，因为我已经向您提供了如何通过输入键事件进行操作并调用您的函数的提示。您的 javascript 代码在浏览器中出现错误，如果您想查看，请打开我的小提琴 -> 右键单击 -> 检查 elemet -> 控制台。你会看到错误

【解决方案2】：

将您的事件触发器更改为如下所示

<input type="text" id="search" onkeypress="if (window.event.keyCode==13) doSearch(document.getElementById('search').value)" placeholder="What are you looking for?">

我还建议使用onkeydown 而不是onkeypress，因为onkeypress 不会检测到某些控制键被按下。

【讨论】：

【解决方案3】：

你可以使用 jQuery 吗？开始稍微整理代码，并将您的 javascript 移出视图。

$('#search').keypress(function(e) {
  if (e.keyCode == '13') {
     e.preventDefault();
     doSearch(this.value);
   }
});

【讨论】：

jQuery 不是必需的，在需要之前不要向人们出售 jQuery