html – 禁用自动文本高亮输入?

前端之家收集整理的这篇文章主要介绍了html – 禁用自动文本高亮输入?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个 https://codepen.io/anon/pen/RgQOWz

放置任何值,当重复单击减少/减少时,输入框文本将突出显示哪个不是我想要发生的.

我试过用户选择:无但仍然没有任何效果.

  1. $(".increment").click(function() {
  2. var score1 = $(".score").val();
  3. score1++;
  4. $(".score").val(score1);
  5. });
  6.  
  7. $(".decrement").click(function() {
  8. var score1 = $(".score").val();
  9. if (score1 == 0) {} else {
  10. score1--;
  11. $(".score").val(score1);
  12. }
  13. });
  14.  
  15. $(function() {
  16. $('input').bind('focus',false);
  17. });
  1. body {
  2. margin: 20px;
  3. }
  4.  
  5. input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
  6. -webkit-appearance: none;
  7. margin: 0;
  8. }
  9.  
  10. .prdin {
  11. text-align: center;
  12. background: #f5f5f5;
  13. width: 40px;
  14. border: 1px solid #ccc;
  15. border-top: 0px;
  16. margin: 20px;
  17. }
  18.  
  19. .prdin div {
  20. display: flex;
  21. height: 37px;
  22. justify-content: center;
  23. align-items: center;
  24. border-top: 1px solid #ccc;
  25. -webkit-touch-callout: none;
  26. -webkit-user-select: none;
  27. -khtml-user-select: none;
  28. -moz-user-select: none -ms-user-select: none;
  29. user-select: none;
  30. }
  31.  
  32. .prdin input {
  33. text-align: center;
  34. border: 0px;
  35. height: 100%;
  36. width: 100%;
  37. font-size: 18px;
  38. font-weight: bold;
  39. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  2.  
  3. <!-- For icon styles -->
  4. <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet" />
  5.  
  6. <div class="prdin">
  7. <div class="increment">
  8. <i class="icon-arrow-up icons"></i>
  9. </div>
  10. <div id="input1">
  11. <input type="number" class="score" value="0">
  12. </div>
  13. <div class="decrement">
  14. <i class="icon-arrow-down icons"></i>
  15. </div>
  16. </div>
  17.  
  18. <div class="prdin">
  19. <div class="increment">
  20. <i class="icon-arrow-up icons"></i>
  21. </div>
  22. <div id="input1">
  23. <input type="number" class="score" value="0">
  24. </div>
  25. <div class="decrement">
  26. <i class="icon-arrow-down icons"></i>
  27. </div>
  28. </div>

解决方法

你可以使用user-select:none;在div上禁用选择/突出显示.
  1. $(".increment").click(function() {
  2. var score1 = $(".score").val();
  3. score1++;
  4. $(".score").val(score1);
  5. });
  6.  
  7. $(".decrement").click(function() {
  8. var score1 = $(".score").val();
  9. if (score1 == 0) {
  10. } else {
  11. score1--;
  12. $(".score").val(score1);
  13. }
  14. });
  15.  
  16. $(function() {
  17. $("input").bind("focus",false);
  18. });
  1. body {
  2. margin: 20px;
  3. }
  4.  
  5. input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
  6. -webkit-appearance: none;
  7. margin: 0;
  8. }
  9.  
  10. .prdin {
  11. text-align: center;
  12. background: #f5f5f5;
  13. width: 40px;
  14. border: 1px solid #ccc;
  15. border-top: 0px;
  16. margin: 20px;
  17. }
  18.  
  19. .prdin div {
  20. display: flex;
  21. height: 37px;
  22. justify-content: center;
  23. align-items: center;
  24. border-top: 1px solid #ccc;
  25. -webkit-touch-callout: none;
  26. -webkit-user-select: none;
  27. -khtml-user-select: none;
  28. -moz-user-select: none;
  29. -ms-user-select: none;
  30. user-select: none;
  31. }
  32.  
  33. .prdin input {
  34. text-align: center;
  35. border: 0px;
  36. height: 100%;
  37. width: 100%;
  38. font-size: 18px;
  39. font-weight: bold;
  40. }
  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
  2. <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  4. <div class="prdin">
  5. <div class="increment">
  6. <i class="icon-arrow-up icons"></i>
  7. </div>
  8. <div id="input1">
  9. <input type="number" class="score" value="0">
  10. </div>
  11. <div class="decrement">
  12. <i class="icon-arrow-down icons"></i>
  13. </div>
  14. </div>

猜你在找的HTML相关文章