Question

我正在为我的博客创建一个实时搜索..我从w3学校得到了这个，我需要添加键盘，鼠标上下活动......

<html>
<head>
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form>

</body>
</html>

Answer 1

只需将其添加到元素中：

<input onkeyup="showResult(this.value)" onkeydown="showResult(this.value)" type="text" size="30" />

Answer 2

我使用＆lt; input type =“text”onkeypress =“doThings（）;”的onkeydown = “doThings（）;”/＆GT;

用于处理鼠标使用onmousedown和onmouseup事件。

Answer 3

学习使用Javascript库（例如jQuery）。手动处理事件是一件痛苦的事，因为您必须编写的代码的一半将是各种浏览器不一致的兼容性包装器。在jQuery中向id为foo的元素添加keydown处理程序就像

一样简单

$('#foo').keydown(function() {
  // do stuff
});

编辑：AJAX也是如此。您在问题中粘贴的代码在jQuery中看起来像这样：

function showResult(str) {
  if (str.length==0) {
    $('#livesearch').html('').css('border', 0);
    return;
  }
  $.get('livesearch.php', {q: str}, function(data) {
    $('#livesearch').html(data).css('border', '1px solid #A5ACB2');
  });
}

如何在javascript中添加key down和on key up事件

3 个答案: