【JS自用案例】通过快捷键聚焦搜索框/仿百度谷歌点击“/”回到搜索框/点击事件

需求：除了搜索类网站，其他带搜索引擎的很少有快捷键唤醒搜索框的功能，例如b站，所以特意设置一个，由于技术有限有小小缺陷但是也能用。

function judgeeCaSearch(para, triggerCode){
   document.querySelectorAll("body")[0].addEventListener("keydown",function(event){
    if(event.keyCode == triggerCode){
      // para.style.display = "inline"
      para.focus()
      console.log("click now")
    }else{
      // console.log("failled")
      return
    }
   }
  )

//组合键触发，方便左手 alt+x, 但后来改为AHK 设置快捷键 触发了 “/”，因为百度谷歌一些自带的程序触发更方便

  //    document.querySelectorAll("body")[0].addEventListener("keydown",function(event){
  //   if( event.altKey&& event.keyCode == 88){
  //     para.focus()
  //     console.log("click now")
  //   }else{
  //     // console.log("failled")
  //     return
  //   }
  //  }
  // )
  

}




function judgeeClickSearch(para, triggerCode){
   document.querySelectorAll("body")[0].addEventListener("keydown",function(event){
    if(event.keyCode == triggerCode){
      // para.focus()
      para.click()
      // document.getElementsByClassName("m-search-btn")[0].click()
      console.log("click now")
    }else{
      // console.log("failled")
      return
    }

   }
  )
}



function addSlectEvent(para,trigger){

   para.onfocus=function(){
        setTimeout(function(){

           para.value  = para.value.replace(trigger,"")
          // para.setSelectionRange(0, para.value.length)

    },10)
  }
}



function main(para){

  if(para){
//点解“/”触发聚焦搜索框
// 因为百度google都是用这个，所以就设置了这
    addSlectEvent( para , "/")
    judgeeCaSearch( para , 191)
  }
}


function mainComment(para){

  if(para){
//点解“/”触发聚焦搜索框
// 因为百度google都是用这个，所以就设置了这
    addSlectEvent( para , ".")
    judgeeCaSearch( para , 190)
  }
}


//================把搜索框的input element替换进去即可================

function hub(){

      //b站首页搜索框
      if(document.querySelector(".carousel-container")){
          main( document.querySelector(".nav-search-input") )
      }
      //search、空间
      main( document.querySelector('.search-input-el') )
      main( document.querySelectorAll('.space_input')[1] )
      //b站弹幕、评论
      main( document.querySelector('.bpx-player-dm-input') )
      mainComment(  document.querySelector(".reply-box-textarea") )


      //抖音
      main( document.querySelector('[data-e2e = searchbar-input]') )
      main( document.querySelector(".LAduFyNT") )

      //...想加什么加什么
      //csdn
      main(  document.querySelector("#txt_SearchText") )
      main(  document.querySelector("#keyword") )

      //csdn 较特殊需要按钮才能打开
      if(document.querySelector("#mSearchInput") ){
          judgeeClickSearch(document.getElementsByClassName("m-search-btn")[0],191)
          main( document.querySelector("#mSearchInput") )
      }

}


window.onload = function(){

      for (var i=0;i<10;i++){
      setTimeout(function(){ hub() },1000+1000*i)
    }

};




//版本2

// 随便点击一下页面就聚焦
//    document.querySelectorAll("body")[0].οnclick=function(){
//    document.querySelector(".nav-search-input").focus()
//   }

参考

keycode表参考

方法三 点击事件模版

套模版直接用 附keycode对照表

setTimeout(function(){

  //点击区域div触发点击

    document.getElementsByClassName("Py_addpy_New")[0].addEventListener('click', function(){
      document.getElementsByClassName("Btn_blue_1 fl")[1].click()
  })
  

  
  //绑定快捷键区域div触发点击
  //judgeeClickSearch(绑定对象,绑定快捷键对应的keycode)
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[0].childNodes[0],"81")  //q
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[1].childNodes[0],"87")  //w
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[2].childNodes[0],"69")  //e
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[3].childNodes[0],"82")  //r

  // judgeeClickSearch(document.getElementsByClassName("Btn_blue_1 fl")[1],"70")  //f


  }, 3000);


function judgeeClickSearch(para, triggerCode){
   document.querySelectorAll("body")[0].addEventListener("keydown",function(event){
    if(event.keyCode == triggerCode){
      para.click()
      console.log("click now")
    }else{
      return
    }
   }

  )
}