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 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
详解http访问解析流程原理
Oct 18 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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生成文件
2007/01/15 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
python实现淘宝秒杀脚本
2020/06/23 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
个人自荐信
2013/12/05 职场文书
前台接待员岗位职责
2014/01/02 职场文书
安全生产汇报材料
2014/02/17 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
爱护花草树木的标语
2014/06/11 职场文书
应聘教师求职信
2014/07/19 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书