JS method to simulate keyboard typing effect_javascript skills-JS Tutorial-php.cn

JS method to simulate keyboard typing effect_javascript skills

WBOY

Release： 2016-05-16 15:46:58

Original

1637 people have browsed it

The example in this article describes how JS simulates keyboard typing effects. Share it with everyone for your reference. The details are as follows:

Here we use JS to simulate the soft keyboard and typing effect. Click on the letter key of the soft keyboard, and the text will be displayed in the text box, just like the keyboard typing effect. The art is not very good and there is not much beautification. CSS masters can beautify it. Clicking a button, it looks pretty good, I think.

Let’s take a look at the operation renderings first:

The specific code is as follows:

<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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.