自定义数字软键盘

1.html

<div id="pic">
	<divclass="inputBtnList">
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>关闭</button>
		<button>4</button>
		<button>5</button>
		<button>6</button>
		<button>退格</button>
		<button>7</button>
		<button>8</button>
		<button>9</button>
		<button>清除</button>
		<button>0</button>
		<button>X</button>
		<button>确定</button>
	</div>
	</div>

2.css

#pic {
    width: 29vw;
    height: 39.7vh;
   	margin: 2vh auto 2vh;
    z-index: 99;
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
    box-shadow: 0 0 10px rgb(43, 42, 42);
}

.inputBtnList {
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.inputBtnList button {
	width: 5.5vw;
    height: 8.6vh;
    line-height: 8.6vh;
    margin-top: 1vh;
    font-size: 2.2vw;
    border-radius: 6px;
    color: #1b50a2;
    margin-left: 0.83vw;
    font-weight: bold;
    border: none;
    background: #fff;
    -webkit-box-shadow: 0px 2px 1px #000;
    box-shadow: 0px 2px 1px #000;
}
.inputBtnList button:active{
    position: relative;
	top: 2px;
}
.inputBtnList button:nth-child(4){
	width: 7.6vw;
    background: #F44336;
    color: #fff;
}
.inputBtnList button:nth-child(8){
	width: 7.6vw;
    background: #ff9800;
    color: #fff;
}
.inputBtnList button:nth-child(12){
	width: 7.6vw;
    background: #2196F3;
    color: #fff;
}
.inputBtnList button:nth-child(15){
	width: 14.1vw;
    background: #4CAF50;
    color: #fff;
}

3.js

$(".inputBtnList button").click(function(e){
	var btnText = e.target.textContent
	var iptText = $(".ipt-number").val()
	
	if(btnText == "确定"){
		console.log("这里执行确定操作")
	}else if(btnText == "退格"){
		$(".ipt-number").val(iptText.substring(0, iptText.length - 1))
	}else if(btnText == "清除"){
		$(".ipt-number").val("")
	}else if(btnText == "关闭"){
		$(".search-number").hide()
	}else{
		$(".ipt-number").val(iptText + btnText);
	}
})