JS实现获取键盘按下的按键并显示在页面上的方法


Posted in Javascript onNovember 04, 2015

本文实例讲述了JS实现获取键盘按下的按键并显示在页面上的方法。分享给大家供大家参考,具体如下:

请你使用键盘输入一些字符,这些字符就被显示在网页的空白处,是不是少了文本框或文本域之类的东西,觉得挺不习惯呢?这个效果是应用了JavaScript中的document.onkeypress对象,监测键盘的一举一动,并记录下哪些键被按下,有意思吧,想研究Js的朋友,就从这些小例子开始吧。

运行效果截图如下:

JS实现获取键盘按下的按键并显示在页面上的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>将按下的按键显示在页面上</title>
<script language="javascript">
<!--
 str = "";
 function showkey(){
  asc = event.keyCode;
  key = String.fromCharCode(asc);
  str += key;
  txt.innerHTML = str;
 }
 document.onkeypress=showkey;
-->
</script>
</head>
<body>
请使用键盘输入文字:
<div id="txt"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
You might like
解析ajax事件的调用顺序
2013/06/17 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
安全环保演讲稿
2014/08/28 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
整改落实自查报告
2014/11/05 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
原告代理词范文
2015/05/25 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
MySQL常见优化方案汇总
2022/01/18 MySQL
frg-100简单操作(设置)说明
2022/04/05 无线电