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

Question

我正在尝试创建一个功能强大的搜索框，以突出显示文本中的单词。但是，我无法通过按 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);
      }
   }
}

Answer 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.

小提琴演示

Answer 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没有检测到某些控制键被按下。

Answer 3

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

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