源码-JavaScript&jQuery交互式前端开发-第6章-事件-键盘事件-确定按键值

最新推荐文章于 2022-10-31 17:57:45 发布

预见未来to50

最新推荐文章于 2022-10-31 17:57:45 发布

阅读量483

点赞数

分类专栏： Front End Tech 文章标签： CSS HTML JavaScript 键盘事件 keyCode

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52654420

版权

Front End Tech 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

键盘事件包括：

1. 输入事件（Input）——当<input>或<textarea>元素的值发生变化时触发

2. 任意键被按下事件（keydown）——当用户按下键盘的任意一个键时触发（按住不放，此事件会不断被触发）

3. 可打印键（参考下文注释）被按下事件（keypress）——当用户按下一个键并在屏幕上显示一个字符时触发（按住不放，此事件会不断被触发）

4. 松开按键事件（keyup）——当用户松开键盘上的任意一个键时触发

注：

键盘中的键分为字符(可打印)键和功能键(不可打印)，系统功能键包括如下：

Esc、Tab、Caps Lock、Shift、Ctrl、Alt、 Enter、 Backspace、 Print Screen、Scroll Lock、Pause Break、Insert、Delete、 Home、 End、Page Up、Page Down， F1 through F12，Num Lock、T he Arrow Keys。

代码示例：实时显示文本框可输入的字数以及最后一个按键的keyCode（键码值）

显示效果：

JS代码如下：

// This example has been updated to fire on the keyup event instead of keypress 
// (on the last line in the event listener) as new text is not in the textarea until the key is released

var el;                                                    // Declare variables

function charCount(e) {                                    // Declare function
  var textEntered, charDisplay, counter, lastkey;          // Declare variables
  textEntered = document.getElementById('message').value;  // User's text
  charDisplay = document.getElementById('charactersLeft'); // Counter element
  counter = (180 - (textEntered.length));                  // Num of chars left
  charDisplay.textContent = counter;                       // Show chars left
  lastkey = document.getElementById('lastKey');            // Get last key elem
  lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // Create msg 
}
el = document.getElementById('message');                   // Get msg element
el.addEventListener('keyup', charCount, false); // on keyup - call charCount()

HTML代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript & jQuery - Chapter 6: Events - Keypress</title>
    <link rel="stylesheet" href="css/c06.css" />
  </head>
  <body>
    <div id="page">
      <h1>List King</h1>
      <form id="messageForm">
        <h2>My profile</h2>
  	    <textarea id="message"></textarea>
        <div id="charactersLeft">180 characters</div>
        <div id="lastKey"></div>
      </form>
    </div>
    <script src="js/keypress.js"></script>
  </body>
</html>

CSS代码：（请参考：源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件，http://blog.csdn.net/hpdlzu80100/article/details/52651002）

总之，这个示例还是相当有意思的！

预见未来to50

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
源码-JavaScript&jQuery交互式前端开发-第6章-事件-键盘事件-确定按键值

键盘事件包括：1. 输入事件（Input）——当或元素的值发生变化时触发2. 任意键被按下事件（keydown）——当用户按下键盘的任意一个键时触发（按住不放，此事件会不断被触发）3. 可打印键（参考下文注释）被按下事件（keypress）——当用户按下一个键并在屏幕上显示一个字符时触发（按住不放，此事件会不断被触发）4. 松开按键事件（keyup）——当用户松开键盘上的任意一个键
复制链接

扫一扫

专栏目录