禁用自动文本高亮输入？
我有这个https://codepen.io/anon/pen/RgQOWz
放置任何值，当反复点击减少/减少时，输入框文本将突出显示哪些不是我想要发生的。
我试过user-select: none但仍然没有任何效果。
$(".increment").click(function() {
var score1 = $(".score").val();
score1++;
$(".score").val(score1);
});
$(".decrement").click(function() {
var score1 = $(".score").val();
if (score1 == 0) {} else {
score1--;
$(".score").val(score1);
}
});
$(function() {
$('input').bind('focus', false);
});body {
margin: 20px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.prdin {
text-align: center;
background: #f5f5f5;
width: 40px;
border: 1px solid #ccc;
border-top: 0px;
margin: 20px;
}
.prdin div {
display: flex;
height: 37px;
justify-content: center;
align-items: center;
border-top: 1px solid #ccc;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none -ms-user-select: none;
user-select: none;
}
.prdin input {
text-align: center;
border: 0px;
height: 100%;
width: 100%;
font-size: 18px;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- For icon styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet" />
<div class="prdin">
<div class="increment">
<i class="icon-arrow-up icons"></i>
</div>
<div id="input1">
<input type="number" class="score" value="0">
</div>
<div class="decrement">
<i class="icon-arrow-down icons"></i>
</div>
</div>
<div class="prdin">
<div class="increment">
<i class="icon-arrow-up icons"></i>
</div>
<div id="input1">
<input type="number" class="score" value="0">
</div>
<div class="decrement">
<i class="icon-arrow-down icons"></i>
</div>
</div> 您可以使用user-select: none; 在div上禁用选择/突出显示。
$(".increment").click(function() {
var score1 = $(".score").val();
score1++;
$(".score").val(score1);
});
$(".decrement").click(function() {
var score1 = $(".score").val();
if (score1 == 0) {
} else {
score1--;
$(".score").val(score1);
}
});
$(function() {
$("input").bind("focus", false);
});body {
margin: 20px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.prdin {
text-align: center;
background: #f5f5f5;
width: 40px;
border: 1px solid #ccc;
border-top: 0px;
margin: 20px;
}
.prdin div {
display: flex;
height: 37px;
justify-content: center;
align-items: center;
border-top: 1px solid #ccc;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.prdin input {
text-align: center;
border: 0px;
height: 100%;
width: 100%;
font-size: 18px;
font-weight: bold;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdin">
<div class="increment">
<i class="icon-arrow-up icons"></i>
</div>
<div id="input1">
<input type="number" class="score" value="0">
</div>
<div class="decrement">
<i class="icon-arrow-down icons"></i>
</div>
</div> 如果您更喜欢CSS方法，请将供应商前缀添加到user-select: none 。 如果你喜欢，你也可以在：focus上添加outline:none 。 在codepen上演示