<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數字鍵盤</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="../jQuery-3.3.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="login-office-page">
<div class="container">
<div class="login-box">
<h2 class="login-tile">協同辦公系統V9版</h2>
<div class="row login-row">
<div class="col-md-7 img-box"></div>
<div class="col-md-5">
<div class="info-box ld-info-box">
<h3 class="title">登錄</h3>
<form class="login-form" action="" method="post">
<div class="form-group">
<input autocomplete="off" type="password" class="form-control pwd-ipt" name="password1" value="" placeholder="請輸入密碼" />
</div>
<div class="keyboard">
<table class="num-tab">
<tr>
<td width="33.3%"><a class="num">1</a></td>
<td><a class="num">2</a></td>
<td width="33.3%"><a class="num">3</a></td>
</tr>
<tr>
<td><a class="num">4</a></td>
<td><a class="num">5</a></td>
<td><a class="num">6</a></td>
</tr>
<tr>
<td><a class="num">7</a></td>
<td><a class="num">8</a></td>
<td><a class="num">9</a></td>
</tr>
<tr>
<td><a class="clear-all">清除</a></td>
<td><a class="num">0</a></td>
<td><a class="del">刪除</a></td>
</tr>
</table>
</div>
<button type="submit" class="btn btn-submit">登 錄</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function () {
var keyVal = [],
$pwd = $('.pwd-ipt');
$pwd.focus();
$(".num-tab").on("click", "a", function () {
var cursurPosition = $pwd.getCursorPosition();
var $this = $(this),
myVal = $this.text();
if ($this.hasClass("clear-all")) {
keyVal = [];
} else if ($this.hasClass("del")) {
if (keyVal.length > 0) {
//console.log(cursurPosition);
keyVal.splice(cursurPosition - 1, 1);
cursurPosition = cursurPosition - 1;
setCursorPos($pwd[0], cursurPosition);
} else {
keyVal = [];
}
} else {
keyVal.splice(cursurPosition, 0, myVal);
cursurPosition = cursurPosition + 1;
setCursorPos($pwd[0], cursurPosition);
}
$pwd.val(keyVal.join(""));
//setCaretPosition($(this)[0], cursurPosition);
});
//獲取光標位置
$.fn.getCursorPosition = function () {
var el = $(this).get(0);
var pos = 0;
if ('selectionStart' in el) {
pos = el.selectionStart;
} else if ('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
/*定位光標*/
var setCursorPos = function (el, pos) {
if (el.createTextRange) {
var rng = el.createTextRange(); //新建textRange對象
rng.moveStart('character', pos); //更改rng對象的開始位置
rng.collapse(true); //光標移動到範圍結尾
rng.select();//選中
el.focus();
} else if (el.setSelectionRange) {
el.focus(); //先聚集
el.setSelectionRange(pos, pos); //設光標
}
}
});
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #4a4a4a;
font-size: 20px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
cursor: pointer;
line-height: 1;
color: #4a4a4a;
outline: none;
}
.login-office-page {
width: 100%;
height: 100%;
overflow: hidden;
background: url("login_bgpic.png") no-repeat;
background-size: 100% 100%;
}
.login-office-page .container {
height: 100%;
}
.login-office-page .login-box {
position: relative;
top: 30%;
transform: translateY(-30%);
-ms-transform: translateY(-30%);
width: 100%;
height: 60%;
margin: 0 auto;
}
login-office-page .form-group {
position: relative;
}
.login-office-page .user-place, .login-office-page .password-place {
position: absolute;
top: 6px;
left: 5px;
z-index: -1;
width: 100%;
height: 100%;
}
.login-office-page .login-box .login-tile {
margin-left: -15px;
margin-bottom: 40px;
color: white;
margin-bottom: 60px;
margin-top: -30px;
}
.login-office-page .login-box .login-row {
height: 100%;
background: white;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
.login-office-page .login-box .login-row .img-box {
height: 100%;
background: url("login_displaypic.png") no-repeat center;
background-size: 100% 100%;
}
.login-office-page .login-box .login-row .col-md-5 {
height: 100%;
}
.login-office-page .login-box .login-row .info-box {
width: 90%;
height: 100%;
margin: 20px auto;
}
.login-office-page .login-box .login-row .info-box .title {
margin: 60px auto;
color: #355E92;
font-family: "MicrosoftYaHei-Bold";
letter-spacing: 0.5em;
font-weight: bold;
}
.login-office-page .login-box .login-row .info-box .login-form .form-control {
margin: 50px auto;
border: none;
border-bottom: 2px solid #C0C0C0;
border-radius: 0;
box-shadow: none;
padding-left: 0;
}
.login-office-page .login-box .login-row .ld-info-box .login-form .form-group {
margin-bottom: 0;
}
.login-office-page .login-box .login-row .ld-info-box .login-form .form-control {
margin: 50px auto 10px;
border: 1px solid #c0c0c0;
width: 98%;
padding: 5px;
font-size: 16px;
}
.login-office-page .login-box .login-row .info-box .login-form .btn-submit {
width: 100%;
color: white;
font-size: 16px;
margin-top: 25px;
background-color: #355E92;
}
.login-office-page .login-box .login-row .info-box .login-form .form-group {
position: relative;
}
.login-office-page .login-box .login-row .info-box .login-form .clear {
display: none;
position: absolute;
z-index: 9;
right: 5px;
bottom: 25px;
color: #c0c0c0;
cursor: pointer;
}
.login-office-page .copyright {
position: relative;
top: 180px;
width: 100%;
color: white;
font-size: 18px;
text-align: center;
}
.login-office-page .login-box .login-row .ld-info-box .title {
margin-bottom: 30px;
}
.ld-info-box .form-control {
margin: 0px auto 30px;
}
.ld-info-box td {
padding: 5px;
cursor: pointer;
}
.ld-info-box a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 100%;
text-align: center;
padding: 10px 0;
border: 1px solid #C0C0C0;
cursor: pointer;
}
.ld-info-box a:hover, .ld-info-box a:active {
background: #EAF2FC;
}
總結：
1.批量獲取鍵盤值
2.光標定位方案
3.需要考慮對數組的尾部和非尾部增刪操作