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 相关文章推荐
写出高效jquery代码的19条指南
Mar 19 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
cookie的secure属性详解
Apr 08 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python中__name__的使用实例
2015/04/14 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
小学生环保倡议书
2014/05/15 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
新党员入党决心书
2015/09/22 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Spring 使用注解开发
2022/05/20 Java/Android