Question

在SO: Best practise to realize up down arrows in select field中，@ guest271314提供了一个解决方案，用于选择向上/向下箭头以选择百分比值。该解决方案有一个小缺陷：

点击太快时，也会选择页面的其他一些元素。

请参阅：https://www.youtube.com/watch?v=rntq0o0nFc0和https://i.stack.imgur.com/TTRVY.png

如何防止错误选择其他元素？

Answer 1

您可以简单地使用CSS删除选择突出显示，如下所示：

.noselect {
     webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

Answer 2

使用其他帖子的片段，您所要做的就是将label元素包装成div，如此（箭头向上包裹，向下箭头不包含）：

$("label[for]").on("click", function(event) {
  $("#input").val(function(_, n) {
    return event.target.htmlFor === "up" 
           ? +n < +this.max ? +n + 5 : n 
           : +n > +this.min ? +n - 5 : n;
  }).trigger("arrow")
});

@charset "UTF-8";
 div {
  padding-top: 20px;
}
input[type="number"] {
  width: 45px;
  outline: thin solid navy;
}
label[for="up"]:nth-of-type(1):before {
  content: "\25B2";
}
label[for="down"]:before {
  content: "\25BC";
  position: relative;
  top: 20px !important;
  left: -32.5px;
}
label[for="down"]:after {
  content: "%";
  position: relative;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  left: -10px;
}
.label-ctn {
  display: block;
  position: absolute;
  top: -10px;
  left: 80px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="select1">
    <option value="abc">abc</option>
  </select>
  <div class="label-ctn"><label for="up"></label></div>
  <input id="input" type="number" min="0" max="100" step="5" value="0">
  <label for="down"></label>
</div>
<script>
</script>

向上/向下箭头单击如果单击太快则选择太多

2 个答案: