javascript keydown 快捷键功能，但如果在文本框中忽略

Question

我已经设置了一键跳过/更改页面功能。但是当用户想在输入文本或文本区域输入“0”时，一键功能也会生效并切换到另一页。

当用户使用文本输入或文本区域时，如何忽略此 java 脚本？

document.onkeydown=nextpage; 
function nextpage(){
  var event=document.all?window.event:arguments[0]; 
  if (event.keyCode==13) location="#skipcontent"; 
  if (event.keyCode==48) location="contact-us.php";
} 

Answer 1

检查target元素以查看事件针对的元素：

document.onkeydown=nextpage; 
function nextpage(e){
  var event = document.all ? window.event : e;
  switch (e.target.tagName.toLowerCase()) {
    case "input":
    case "textarea":
    case "select":
    case "button":
    // ...and so on for other elements you want to exclude;
    // list of current elements here: http://www.w3.org/TR/html5/index.html#elements-1
      break;
    default:
      if (event.keyCode==13) location="#skipcontent"; 
      if (event.keyCode==48) location="contact-us.php";
      break;
  }
}

或者代替 a switch，您可以使用带有交替的正则表达式：

document.onkeydown=nextpage; 
function nextpage(e){
  var event = document.all ? window.event : e;
  if (!/^(?:input|textarea|select|button)$/i.test(e.target.tagName)) {
    if (event.keyCode==13) location="#skipcontent"; 
    if (event.keyCode==48) location="contact-us.php";
  }
}

旁注：您可能会考虑 using addEventListener，它在所有现代浏览器上都受支持，并且允许每个元素的每个事件有多个处理程序。如果你必须支持 IE8，这个答案有一个你可以使用的函数，它可以attachEvent为你回退并处理事件对象随机播放。