Question

我有一个带加号减号的输入字段来提高/降低其中的数字。看起来像这样：

<a onclick="less()">-</a>
<input type="text" text-input">
<a onclick="more()">+</a>

当我点击提高数字时，如何禁用/阻止+/-文本的选择/突出显示？

我正在寻找一种跨浏览器的解决方案。感谢

Answer 1

根据您必须支持的浏览器版本，您可以尝试将css属性user-select用于none。这里有一个这样的实现示例http://css-tricks.com/almanac/properties/u/user-select/

Answer 2

您可以使用css ::selection

::selection {
  background: none;
}
::-moz-selection {
  background: none;
}
::-webkit-selection {
  background: none;
}

Answer 3

最佳做法是让<button>这样做然后你的两个突出问题都解决了，你以更好的方式编写代码。

（您也可以使用CSS更改按钮，使它们看起来像您想要的那样）

Answer 4

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      .linklike { color: blue; text-decoration:underline  }        
    </style>
  </head>

  <body>
    <button onclick="less()">-</button>
    <input type="text">
    <button onclick="more()">+</button>
    <br>
    <br>
    OR<br
    <br>
    <br>
    <span onclick="less()" class="linklike">-</span>
    <input type="text">
    <span onclick="more()" class="linklike">+</span>    


  </body>

</html>

快速plnkr：http://plnkr.co/edit/u7dKekjLg6DpyUjz1a06?p=preview

单击时防止文本突出显示

4 个答案: