由于最近要写一个web版的软键盘,需要能控制大小写,能切换光标所在输入框,能通过光标所在位置判断键盘可以输入的内容。效果图如下所示:
话不多说,直接上代码。
HTML布局:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>软键盘</title>
<!--屏幕分辨率不同,引入不同布局 -->
<link rel="stylesheet" type="text/css" href="css/tabletStyle.css" media="screen and (min-width: 750px) and (max-width: 1024px)">
<link rel="stylesheet" type="text/css" href="css/smallStyle.css" media="screen and (max-width: 750px)">
<link rel="stylesheet" type="text/css" href="css/maxStyle.css" media="screen and (min-width: 1024px)">
</head>
<body>
<div id="container">
<!--N:Number L:letter A:all S:Special characters -->
<input class="keyboardInput" format="LNNNAAAAAAAA" type="text" id="userName">
<input class="keyboardInput" format="AAAAAAAAAAAA" type="text" id="password">
<input class="keyboardInput" format="LNNN" type="text" id="block" maxlength="4">
<input class="keyboardInput" format="NNN" type="text" id="slot" maxlength="3">
<ul id="keyboard">
<li class="disable">`</li>
<li class="number All">1</li>
<li class="number All">2</li>
<li class="number All">3</li>
<li class="number All">4</li>
<li class="number All">5</li>
<li class="number All">6</li>
<li class="number All">7</li>
<li class="