这里使用js模拟实现软键盘及打字效果，点击软键盘年的字母键，文本框中即可显示文字，像是键盘打字的效果，美工不太好，没怎么美化，css高手可美化一下按钮，看上去还挺不错吧，我觉得。
先来看看运行效果图：
具体代码如下：
<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程序设计有所帮助。
更多js模拟键盘打字效果的方法。