- 效果图
- js文件
import $ from 'jquery'
/**
* 调用键盘
* @param obj input
* @param round 小数后几位 0不带小数
*/
export function loadNumberKeyboard(obj, round) {
if ($("#numberkeyboard").length == 0) {
let numbtnhtml =
'<div class="numbtn" key="7"><span>7</span></div><div class="numbtn" key="8">8</div><div class="numbtn" key="9">9</div>' +
'<div class="numbtn" key="4">4</div><div class="numbtn" key="5">5</div><div class="numbtn" key="6">6</div>' +
'<div class="numbtn" key="1">1</div><div class="numbtn" key="2">2</div><div class="numbtn" key="3">3</div>' +
'<div class="numbtn" key=".">.</div><div class="numbtn" key="0">0</div><div class="numbtn " key="backspace">退格</div>';
$("body").append('<div style="position: absolute; left: 0; top: 0; display: none;"><div id="numberkeyboard">' + numbtnhtml + '</div></div>');
$("#numberkeyboard").find(".numbtn").bind("mousedown", function () {
$(this).addClass("numbtndown");
});
$("#numberkeyboard").find(".numbtn").bind("mouseup", function () {
$(this).removeClass("numbtndown");
});
}
let containerDiv = $("#numberkeyboard").parent();
containerDiv.show();
containerDiv.css("z-index", 9100);
obj = $(obj);
if (obj.attr("id")) {
var objpadding = parseInt(obj.css("padding-top").replace("px", "")) + parseInt(obj.css("padding-bottom").replace("px", ""));
if (obj.offset().left + 340 >= $(window).width()) {
containerDiv.css("left", $(window).width() - 340);
} else {
containerDiv.css("left", obj.offset().left);
}
if (obj.offset().top + 291 + obj.height() + objpadding + 2 + 5 >= $(window).height() + $(window).scrollTop()) {
containerDiv.css("top", obj.offset().top - 291 - 5);
} else {
containerDiv.css("top", obj.offset().top + obj.height() + objpadding + 2 + 5);
}
}
// 点击键盘外隐藏键盘
$('html,body')
.click((e) => {
let target = e.target;
if (target.localName !== 'input' && target.className !== 'numbtn') {
containerDiv.hide();
$('.numberkeyboard').hide();
}
})
$("#numberkeyboard").find(".numbtn").unbind("click");
$("#numberkeyboard").find(".numbtn").bind("click", function (e) {
// obj.focus();
let key = $(this).attr("key");
switch (key) {
case "backspace":
if (obj.val().length > 0) {
obj.val(obj.val().substr(0, obj.val().length - 1));
}
break;
case "sign":
if (obj.val().length > 0) {
if (obj.val().substr(0, 1) === "-") {
obj.val(obj.val().substr(1, obj.val().length - 1));
} else {
obj.val("-" + obj.val());
}
}
break;
case "close":
$("#numberkeyboard").find(".numbtn").unbind("click");
containerDiv.hide();
break;
default:
let newVar = obj.val() + key;
if (round === 2) {
newVar = newVar.match(/^\d{0,5}(?:\.\d{0,2})?/);
} else if (round === 3) {
newVar = newVar.match(/^\d{0,5}(?:\.\d{0,3})?/);
} else {
newVar = newVar.replace(/[^\d]/g, '')
}
obj.val(newVar);
break;
}
// 模拟输入
obj[0].dispatchEvent(new Event('input'));
});
}
#numberkeyboard {
background-color: rgb(17, 17, 17);
height: 295px;
margin: 0;
padding: 2px;
position: relative;
width: 290px;
border-radius: 5px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#numberkeyboard .numbtn {
border-radius: 5px;
height: 68px;
width: 91px;
background-color: rgba(91, 91, 91, 0.6);
color: white;
margin: 2px;
line-height: 68px;
text-align: center;
font-weight: bold;
font-size: 25px;
}
#numberkeyboard .numbtn:last-child{
background-color: red;
font-size: 20px;
}
#numberkeyboard .numbtn:active {
background-color: #cccccc;
color: black;
}
- 使用方式
1.首先再main.js中引入上方的css文件
2.vue代码中直接使用即可 <input placeholder="登录账号 / 员工编号"
id="username" @focus="getKeyboardNum('username')"
v-model="loginForm.username"/>
getKeyboardNum(id) {
loadNumberKeyboard($("#" + id + ""),0)
},