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

前端技术 2023/09/03 JavaScript

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

这里使用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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/8638

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案