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事件 delegate()使用方法介绍
Oct 30 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
javaScript中的空值和假值
Dec 18 Javascript
浅谈node中的cluster集群
Jun 02 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
SONY SRF-40W电路分析
2021/03/02 无线电
php layui实现前端多图上传实例
2019/07/30 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
社区母亲节活动记录
2014/03/06 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
万能检讨书
2015/01/27 职场文书
趣味运动会开幕词
2015/01/28 职场文书
行政处罚告知书
2015/07/01 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python