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 相关文章推荐
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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
PHP递归算法的详细示例分析
2013/02/19 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python定时关机小脚本
2018/06/20 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
幼儿园中班教学反思
2014/02/10 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
MySQL 数据表操作
2022/05/04 MySQL