JS模拟键盘打字效果的方法


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS模拟键盘打字效果的方法。分享给大家供大家参考。具体如下:

这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得。

先来看看运行效果图:

JS模拟键盘打字效果的方法

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>模拟键盘打字</title>
</head>
<body>
<script Language="Javascript">
function a()
{
var text=document.form.text.value
document.form.text.value=text + "A";
}
function b()
{
var text=document.form.text.value
document.form.text.value=text + "B";
}
function c()
{
var text=document.form.text.value
document.form.text.value=text + "C";
}
function d()
{
var text=document.form.text.value
document.form.text.value=text + "D";
}
function e()
{
var text=document.form.text.value
document.form.text.value=text + "E";
}
function f()
{
var text=document.form.text.value
document.form.text.value=text + "F";
}
function g()
{
var text=document.form.text.value
document.form.text.value=text + "G";
}
function h()
{
var text=document.form.text.value
document.form.text.value=text + "H";
}
function i()
{
var text=document.form.text.value
document.form.text.value=text + "I";
}
function j()
{
var text=document.form.text.value
document.form.text.value=text + "J";
}
function k()
{
var text=document.form.text.value
document.form.text.value=text + "K";
}
function l()
{
var text=document.form.text.value
document.form.text.value=text + "L";
}
function m()
{
var text=document.form.text.value
document.form.text.value=text + "M";
}
function n()
{
var text=document.form.text.value
document.form.text.value=text + "N";
}
function o()
{
var text=document.form.text.value
document.form.text.value=text + "O";
}
function p()
{
var text=document.form.text.value
document.form.text.value=text + "P";
}
function q()
{
var text=document.form.text.value
document.form.text.value=text + "Q";
}
function r()
{
var text=document.form.text.value
document.form.text.value=text + "R";
}
function s()
{
var text=document.form.text.value
document.form.text.value=text + "S";
}
function t()
{
var text=document.form.text.value
document.form.text.value=text + "T";
}
function u()
{
var text=document.form.text.value
document.form.text.value=text + "U";
}
function v()
{
var text=document.form.text.value
document.form.text.value=text + "V";
}
function w()
{
var text=document.form.text.value
document.form.text.value=text + "W";
}
function x()
{
var text=document.form.text.value
document.form.text.value=text + "X";
}
function y()
{
var text=document.form.text.value
document.form.text.value=text + "Y";
}
function z()
{
var text=document.form.text.value
document.form.text.value=text + "Z";
}
function space()
{
var text=document.form.text.value
document.form.text.value=text + " ";
}
// -->
</SCRIPT>
<form name="form">
  <p align="center"><textarea name="text" rows="10" cols="50"></textarea></p>
  <p align="center"><input type="button" name="B1" value=" Q " OnClick="q()"><input
  type="button" name="B2" value="W" OnClick="w()"><input type="button"
  name="B3" value="E" OnClick="e()"><input type="button" name="B4" value="R" OnClick="r()"><input
  type="button" name="B5" value="T" OnClick="t()"><input type="button"
  name="B6" value="Y" OnClick="y()"><input type="button" name="B7" value="U" OnClick="u()"><input
  type="button" name="B8" value=" I " OnClick="i()"><input type="button"
  name="B9" value="O" OnClick="o()"><input type="button" name="B10" value="P" OnClick="p()"></p>
  <p align="center"><input type="button" name="B11" value="A" OnClick="a()"><input
  type="button" name="B12" value="S" OnClick="s()"><input type="button"
  name="B13" value="D" OnClick="d()"><input type="button" name="B14"
  value="F" OnClick="f()"><input type="button" name="B15" value="G" OnClick="g()"><input
  type="button" name="B16" value="H" OnClick="h()"><input type="button"
  name="B17" value="J" OnClick="j()"><input type="button" name="B18"
  value="K" OnClick="k()"><input type="button" name="B19" value="L" OnClick="l()"></p>
  <p align="center"><input type="button" name="B20" value="Z" OnClick="z()"><input
  type="button" name="B21" value="X" OnClick="x()"><input type="button"
  name="B22" value="C" OnClick="c()"><input type="button" name="B23"
  value="V" OnClick="v()"><input type="button" name="B24" value="B" OnClick="b()"><input
  type="button" name="B25" value="N" OnClick="n()"><input type="button"
  name="B26" value="M" OnClick="m()"></p>
  <p align="center"><input type="button" name="B27"
  value="" OnClick="space()"></p>
<INPUT TYPE="hidden" name="hidden">
</form>
</body>
</html>

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

Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
javaScript Array api梳理
Mar 31 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 #Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 #Javascript
js绘制圆形和矩形的方法
Aug 05 #Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 #Javascript
JS版元素周期表实现方法
Aug 05 #Javascript
javascript实现手机震动API代码
Aug 05 #Javascript
JS实现生成会变大变小的圆环实例
Aug 05 #Javascript
You might like
php class类的用法详细总结
2013/10/17 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python中的__slots__使用示例
2015/02/26 Python
介绍Python中的__future__模块
2015/04/27 Python
python实现统计代码行数的方法
2015/05/22 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
公司年会主持词
2014/03/22 职场文书
服务理念口号
2014/06/11 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
2016年社区服务活动总结
2016/04/06 职场文书