点击上翻按钮输入框中加1，点下按钮输入框中减1 去掉type=“number”的默认按钮...

最新推荐文章于 2022-11-05 20:00:00 发布

weixin_33750452

最新推荐文章于 2022-11-05 20:00:00 发布

阅读量169

点赞数

原文链接：https://my.oschina.net/u/2252639/blog/638385

版权

2019独角兽企业重金招聘Python工程师标准>>>

作者：victor 更多前端学习请加群：JS/DEJS/HTML5/（前端）458633781 或关注心魅体公众号：ilittlekiss

注释：

重点1：&and; 为上尖括号 &or;为下尖括号

重点2：去掉type="number"时右边的默认按钮CSS

说明：需要自己引入JQ库

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

HTML和JS代码：

<!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>

整个代码为上面的内容……

转载于:https://my.oschina.net/u/2252639/blog/638385