javascript - 点击/单击选择输入/文本框字段的内容

Question

可选文本框的我的王国

---

挑战:

创建一个“任何”类型的跨浏览器文本框/输入字段，可以在点击/点击时选择其内容。

一个多年来一直困扰着许多人的问题。

问题:

当使用触摸设备时，tap 事件会在鼠标使用 click 事件时触发。在 Apple 设备上，点击事件不会触发 onclick 或 onfocus。这不是 Safari 特有的问题，因为 Google Chrome 在 Apple 设备上有同样的问题，但在 Android 设备上没有。苹果设备处理点击事件的方式明显不同。

---

选择文本的标准方法是简单地使用:

$('input').focus(function () {
  $(this).select();
});

在堆栈溢出中提到的另一个选定的解决方法是:

$('input').focus(function () {
  this.select(); //no jquery wrapper
}).mouseup(function (e) {
  e.preventDefault();
});

两者都很好用，但都不适合苹果设备。

我找到的唯一可行的解​​决方案是根据此 post 创建一个选择范围.这是纯 JavaScript，效果很好。

$('input').click(function () {
  document.getElementById('ID').selectionStart = 0
  document.getElementById('ID').selectionEnd = 999
});

---

主要解决方案

凭借所有这些知识，我想出了一个我自己的组合解决方案。

$('.Select').focus(function () {
  this.select();
  this.setSelectionRange(0, 9999);
}).mouseup(function (e) {
  e.preventDefault();
});

---

重温问题

这是一个长期存在的问题，我认为已经解决了，但现在我们到了 2016 年，这个问题像行尸走肉一样从地球上冒出来。

规范现在明确指出:

You cannot use 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

因此主码将不再适用于苹果设备的数字字段。

我们又来了，是时候找一些赏金猎人来调查这个案子了!

IMPORTANT ADDITIONAL INFORMATION: I hate apple.

---

$('.Select').focus(function () {
  this.select();
  this.setSelectionRange(0, 9999);
}).mouseup(function (e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input type text
<br/><input type="text" value="click me" class="Select">
<br/>Input type number
<br/><input type="number" value="0" class="Select">
<br/>I dont like apples.

Answer 1

点击和点击是两个事件。不同的移动操作系统有自己的方式来映射这两个事件。不仅是点击，Android 和 iOS 也以不同的方式将悬停事件映射为点击。就像前一段时间，不同的浏览器有不同的 javascript 集，所以 jquery 可以解决这个问题。

所以，我建议你使用一个名为 hammer.js 的库来处理它。

var hammertime = new Hammer($(".testing")[0]);
hammertime.on('tap', function(ev) {
        event.target.selectionStart = 0
    event.target.selectionEnd = 999
});

var hammertime2 = new Hammer($(".testing2")[0]);
hammertime2.on('tap', function(ev) {
        $(event.target).select(); //to select number input, use this method
});

jsFiddle demo