點擊上翻按鈕輸入框中加1，點下按鈕輸入框中減1 去掉type=「number」的默認按鈕

時間 2019-11-19

標籤點擊上翻按鈕輸入去掉 type number 默認简体版

原文原文鏈接

做者：victor 更多前端學習請加羣：JS/DEJS/HTML5/（前端）458633781 或關注心魅體公衆號：ilittlekissjavascript

註釋：css

重點1：&and; 爲上尖括號 &or;爲下尖括號 html

重點2：去掉type="number"時右邊的默認按鈕CSS前端

說明：須要本身引入JQ庫java

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}

HTML和JS代碼：jquery

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script>
			$(function() {
				$("input[type='number']").keyup(function() {
					if ($("#inputid").val() < 1) {
						alert("輸入的數字最小爲1");
						parseInt($("#inputid").val(1));
						return;
					}
				});
				$("input[type='button']").click(function() {
					if ($("#inputid").val() < 1) {
						alert("輸入的數字最小爲1");
						parseInt($("#inputid").val(1));
						return;
					}
					if ($(this).attr("id") == "but1") {
						$("#inputid").val((parseInt($("#inputid").val()) + 1));
					} else {
						$("#inputid").val((parseInt($("#inputid").val()) - 1));
					}
				});
			})
		</script>
		<style>
			#inputid {
				height: 37px;
				line-height: 37px;
				width: 50px;
			}
			
			.divcontent {
				width: 200px;
				height: auto;
				margin: 0 auto;
			}
			
			.divcontent div {
				display: inline-block;
				height: auto;
				float: left;
				margin-right: 5px;
			}
			
			.divcontent div input {
				border: 1px solid #027DE7;
			}
			
			.divcontent .but input {
				background: #027DE7;
				border: none;
				color: #FFFFFF;
				height: 20px;
				width: 20px;
				margin-bottom: 1px;
				display: block;
				outline: none;
			}
			
			.ulli {
				border-bottom: 1px dotted saddlebrown;
				width: 500px;
				margin: 0 auto;
				height: auto;
				clear: both;
				display: block;
			}
			
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance: none !important;
			}
		</style>
	</head>

	<body>
		<div class="divcontent">
			<div>
				<input id="inputid" type=number checked/>
			</div>
			<div class="but">
				<input type="button" id="but1" value="&and;" />
				<input type="button" id="but2" value="&or;" />
			</div>
		</div>

	</body>

</html>

整個代碼爲上面的內容……web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。