Maison >interface Web >js tutoriel >Comment simuler l'effet de frappe au clavier dans JS
L'exemple de cet article décrit comment JS simule les effets de frappe au clavier. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Ici, JS est utilisé pour simuler le clavier logiciel et les effets de frappe. Cliquez sur la touche lettre du clavier logiciel, et le texte sera affiché dans la zone de texte, tout comme le. effet de frappe au clavier. L'art n'est pas très bon, et il n'y a rien d'embellissement, les maîtres CSS peuvent embellir le bouton, ça a l'air plutôt bien, je pense.
Jetons d'abord un coup d'œil au diagramme d'effet de course :
Le code spécifique est le suivant :
<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>
J'espère cet article aidera la programmation javascript de tout le monde.
Pour plus d'articles liés à la méthode JS de simulation des effets de frappe au clavier, veuillez faire attention au site Web PHP chinois !