在 jQuery 中,keydown事件是用于捕获键盘按键按下操作的重要事件之一。它为网页的交互性提供了丰富的可能性,让我们能够根据用户的按键输入执行各种响应动作。该API 3.3版本已弃用。请使用 .on( "keydown", handler ) 或 .on( "keydown", eventData, handler )代替.keydown( handler ) or .keydown( eventData, handler )请使用 .trigger( "keydown" ) 代替 .keydown()
handler(eventObject)
类型: Function()
每次事件触发时会执行的函数。
eventData
类型: PlainObject
一个对象,它包含的数据键值对映射将被传递给事件处理程序。
handler(eventObject)
类型: Function()
每次事件触发时会执行的函数。
这个方法不接受任何参数。
用于指定要监听 `keydown` 事件的元素,而 `function(event)` 则是当按键按下时执行的回调函数。`event` 对象包含了与事件相关的各种信息,例如按下的键码等。
keydown - 键按下,全按键(除了printScreenSysRq拷屏键)
keypress - 键按下,和keydown区别是keypress不是全按键,shift、alt、NumLock、delete等按键触发不了
keyup - 键被松开
<script> $(document).ready(function() { $(document).keydown(function(event) { $('#display').text('您按下了:' + event.key); }); }); </script> <div id="display"></div>
在这个案例中,当用户在页面上按下任何键时,都会在指定的 `div` 中实时显示按下的键。
<script> $(document).ready(function() { $('#inputField').keydown(function(event) { var keyCode = event.keyCode || event.which; if ((keyCode < 48 || keyCode > 57) && (keyCode < 96 || keyCode > 105) && keyCode!== 8 && keyCode!== 9) { event.preventDefault(); } }); }); </script> <input type="text" id="inputField" placeholder="请输入数字">
此例中,只允许用户在输入框中输入数字,其他按键的输入被阻止。
<script> $(document).ready(function() { $(document).keydown(function(event) { if (event.ctrlKey && event.keyCode === 65) { // Ctrl + A alert('您按下了 Ctrl + A'); } }); }); </script> <p>在文档中按下 Ctrl + A 键,会弹出一个警告框。</p>
这里实现了一个当用户按下 `Ctrl + A` 组合键时弹出提示框的功能。
属性:
altKey:如果在按键时按下了 Alt 键,则为 true,否则为 false。
ctrlKey:如果在按键时按下了 Ctrl 键,则为 true,否则为 false。
shiftKey:如果在按键时按下了 Shift 键,则为 true,否则为 false。
key:按下的键的字符串表示(例如,"Enter"、"ArrowLeft" 等)。
keyCode:按下的键的键码值(数字)。不过,这个属性已被弃用,建议使用 which 或 code。
which:与 keyCode 类似,表示按下的键的键码值。
code:按下的键的字符串形式的键码(例如,"KeyA"、"ArrowUp" 等)。
target:触发事件的 DOM 元素。
方法:
preventDefault():用于阻止事件的默认行为(例如,阻止输入框在按下回车键时提交表单)。
stopPropagation():阻止事件冒泡,即防止事件向上传播到父元素的事件处理程序。
1. 事件冒泡:keydown事件可能会冒泡,如果页面结构复杂,可能会导致意外的触发。要根据具体情况决定是否需要阻止冒泡。
2. 输入焦点:确保监听keydown事件的元素处于焦点状态,否则可能无法捕获到按键事件。
3. 性能影响:如果在频繁触发的keydown事件处理函数中执行复杂的操作,可能会影响页面的性能。
4. 组合键处理:处理组合键时要注意不同浏览器对修饰键(如 `Ctrl`、`Shift` 等)的处理方式可能存在细微差别。
5. 移动端支持:在移动设备上,keydown事件的行为可能与桌面端不同,可能需要结合触摸事件进行处理。
6. 字符输入与键码:某些情况下,可能需要根据具体需求处理字符输入(通过 `event.key`)或键码(通过 `event.keyCode` 或 `event.which`)。
7. 可访问性:对于依赖键盘操作的功能,要确保符合可访问性标准,以便残疾用户能够正常使用。
通过合理运用keydown事件,并注意上述事项,我们可以为用户提供更流畅、便捷和个性化的交互体验,增强网页的功能性和用户友好性。