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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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使之能同时支持GIF和JPEG
2006/10/09 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python