禁用自动文本高亮输入？

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>

- user7716943

Answer 1

您可以在 div 元素上使用 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;
}

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

- Michael Coker

---

谢谢 - 当stackoverflow允许我这样做时，我会接受的。 - user7716943

很好。只是要注意浏览器支持。 - Fahmi

Answer 2

如果您喜欢使用 CSS 方法，请在 user-select: none 中添加供应商前缀。您还可以在 :focus 上添加 outline:none，以使其更加美观。在 codepen 上的演示。

- clodal

---

我认为你误解了问题。 - Fahmi