Keydown jQuery - Javascript

keydown 是 jQuery 的一个事件处理函数，用于捕获用户按下键盘上的任意键。在 Web 开发中，keydown 可以应用于很多场景，比如实现快捷键操作、文本编辑器中的键盘操作等等。

基本用法

$(document).keydown(function(event) {
  console.log(event.which);
});

上面的代码使用 keydown 事件监听器，打印出按下的键的键码 event.which。这个键码是一个数字，表示了按下的键对应的 ASCII 码值。键码可以通过查看 ASCII 码表 获取。

常见应用

实现快捷键操作

$(document).keydown(function(event) {
  if (event.ctrlKey && event.which === 83) {
    event.preventDefault(); // 阻止默认行为
    saveFile(); // 处理逻辑
  }
});

上面的代码实现了在按下 CTRL+S 快捷键时触发 saveFile 函数对文件进行保存操作。

用于文本编辑器的键盘操作

$(document).keydown(function(event) {
  if (event.which === 9) { // 按下TAB键
    event.preventDefault(); // 阻止默认行为
    var indent = '    '; // 定义一个缩进
    var start = this.selectionStart;
    var end = this.selectionEnd;

    // 将TAB键插入
    this.value = this.value.substring(0, start) + indent + this.value.substring(end);
    this.selectionStart = this.selectionEnd = start + indent.length; // 设置光标位置为插入之后
  }
});

上面的代码实现了在文本输入框中按下 TAB 键时进行自动缩进操作。

注意事项

• keydown 只有在焦点在当前页面上才会触发，如果当前页面没有获取到焦点，则不会发生任何反应。

• 由于在 keydown 事件触发后文本框中的内容可能会发生改变，所以在对文本框的内容进行操作时最好使用 this.value 而不是 $(this).val()。

最后，感谢您的阅读！如果您觉得本篇文章对您有帮助，请不要吝啬您的 Star 和转发~