禁用自动文本高亮输入？

Question

我有这个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>

​

Answer 1

您可以在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>

​

Answer 2

如果您喜欢CSS方法，请在user-select: none中添加供应商前缀。如果您愿意，还可以添加outline:none on :focus to make。代码演示