Javascript to implement custom simple web page soft keyboard effect code _ javascript skills

This article mainly introduces JavaScript code for customizing the keyboard effect of a simple web page. It can be used to simulate keyboard layout and respond to mouse clicks and press the keyboard button. It is simple and practical and has reference value, for more information about how to use JavaScript to customize the keyboard of a simple web page, see the examples in this article. We will share this with you for your reference. The details are as follows:

This is a simple custom web page keyboard that does not use any controls. It is only used to practice JavaScript writing. It is not considered too much in terms of security. If you have any concerns, you do not need to use it for the purpose of learning, hope it is useful to you.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/

The Code is as follows:

Write a simple web page keyboard
 Script var htmlCode = {"&": "&", '"':" \ "", "<": "<", "> ": ">",} function test () {var input = document. getElementById ("input"); var e = window. event | test. caller. arguments [0]; var el = e.tar get | e. srcElement; if (el. tagName. toLowerCase () = "td" & el. rowSpan <= 1 & el. colSpan <= 1) {var str = el. innerHTML; str = htmlCode [str] | str; input. value + = str;} if (el. innerHTML = "backspace") {input. Value = input. value. slice (0,-1);} if (el. innerHTML = "/") {var els = document. getElementsByTagName ("td"); for (var I = 0, l = els. length; I <l; I ++) {var str = els [I]. innerHTML; if (/^ [a-z] $ /. test (str) els [I]. innerHTML = str. toUpperCase (); if (/^ [A-Z] $ /. test (str) els [I]. innerHTML = str. toLowerCase () ;}} if (el. innerHTML = "ENTER") {ctrKeyboard () ;}} function ctrKeyboard () {var el = document. GetElementById ("keyboard"); if (el. offsetWidth> 0) el. style. display = "none"; else {el. style. display = "block"; sortNum (); capsInit () ;}} function capsInit () {var els = document. getElementsByTagName ("td"); for (var I = 0, j = 0, l = els. length; I <l; I ++) {var str = els [I]. innerHTML; if (/^ [A-Z] $ /. test (str) els [I]. innerHTML = str. toLowerCase () ;}} function sortNum () {var arr = [,]. Sort (function () {return Math. random ()> 0.5? 1:-1;}); var els = document. getElementsByTagName ("td"); for (var I = 0, j = 0, l = els. length; I <l; I ++) {var str = els [I]. innerHTML; if (/^ \ d $ /. test (str) els [I]. innerHTML = arr [j ++];} script

 
 
 
 
  
  
 
   
 
    
Keyboard simulation input secret
 
   
 
   
 
    
~
 
    
!
 
    
@
 
    
#
 
    
$
 
    
%
 
    
^
 
    
&
 
    
*
 
    
(
 
    
)
 
    
_
 
    
+
 
    
|
 
    
Return
 
   
 
   
 
    
`
 
    
1
 
    
2
 
    
3
 
    
4
 
    
5
 
    
6
 
    
7
 
    
8
 
    
9
 
    
0
 
    
-
 
    
=
 
    
\
 
   
 
   
 
    
Q
 
    
W
 
    
E
 
    
R
 
    
T
 
    
Y
 
    
U
 
    
I
 
    
O
 
    
P
 
    
{
 
    
}
 
    
[
 
    
]
 
    
Switch large/lower case
 
   
 
   
 
    
A
 
    
S
 
    
D
 
    
F
 
    
G
 
    
H
 
    
J
 
    
K
 
    
L
 
    
:
 
    
"
 
    
;
 
    
'
 
    
ENTER
 
   
 
   
 
    
Z
 
    
X
 
    
C
 
    
V
 
    
B
 
    
N
 
    
M
 
    
<
 
    
>
 
    
?
 
    
,
 
    
.
 
    
/
 
   
 
  
 
 

I hope this article will help you design JavaScript programs.