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

Question

可选文本框的我的王国

---

挑战：

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

多年来一直没有解决的问题。

问题：

当使用触摸设备时，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 年，问题像行尸走肉一样从地球上升起。

规范现在明确指出：

您不能在“HTMLInputElement”上使用“setSelectionRange”：输入元素的类型（“数字”）不支持选择。

所以主代码将不再适用于苹果设备的数字字段。

我们又来了，是时候让一些赏金猎人来处理这个案子了！

重要的附加信息：我讨厌苹果。

---

$('.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

这个怎么样？

function addClickSelector(obj) {
  function selectText(event) {
    event.target.selectionStart = 0
    event.target.selectionEnd = event.target.value.length
  };

  if (obj.addEventListener) {
    obj.addEventListener("click", selectText, false);
  } else {
    obj.attachEvent("onclick", selectText);
  }
};
[].forEach.call(document.getElementsByClassName('selectOnClick'), addClickSelector);

Answer 2

点击和单击是两个事件。不同的移动操作系统有自己的方式来映射这两个事件。不仅点击，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

Answer 3

临时更改类型属性怎么样？

我想选定的文本将被用户输入替换...

一旦用户输入内容或模糊，您将必须恢复原始类型属性，以防他离开该字段而不输入任何内容。

我没有任何 Apple 设备可以试用... ;)

$('.Select').focus(function () {
  if($(this).attr("type")=="number"){
    // Temporarly change the type atttribute to "text"
    $(this).attr({"type":"text"});
    $(this).addClass("wasNumber");
  }
  this.setSelectionRange(0, 9999);
  this.select();
  }).mouseup(function (e) {
  e.preventDefault();
});

$('.Select').keyup(function () {
    if($(this).hasClass("wasNumber")){
        // Restore the original type atttribute
        $(this).attr({"type":"number"});
        $(this).removeClass("wasNumber");
    }
});

$('.Select').blur(function () {
    if($(this).hasClass("wasNumber")){
        // Restore the original type atttribute
        $(this).attr({"type":"number"});
        $(this).removeClass("wasNumber");
    }
});

重要的编辑：我刚刚在我的一个项目中尝试过它......它确实有效......但是，如果您依赖数字类型向您的移动用户显示数字键盘。 .. 这是显示的文本键盘。在输入第一个字符后，由于该字段现在切换回“数字”，Snap！移动键盘刚刚消失……就像焦点一样。不好！

此时显示数字小键盘会不会那么糟糕，但不会。

所以我回来告诉我这么简单的解决方案不适合移动设备，这是不使用它的一个很好的理由。我真的很想回答......并充分测试了我的想法。请不要投反对票。 ;)

仅作记录：现在和直到有更好的解决方案之前，我只是将值完全删除而不是选择它...因为无论如何用户都会更改该值。

Answer 4

使用 JavaScript/jQuery 在<input type="text"/>、<input type="tel"/> 或<input type="number"/> 中选择文本非常容易。以下是我在集成输入文本或数字时一直使用的代码。 在我们的例子中，JavaScript 代码直接添加到输入本身，这让事情变得更加方便。我们监听 点击事件，然后触发两个内置 JavaScript 函数：focus() & select();

正确的是，此解决方案适用于 <input type="text"/> 而没有 jQuery，但为了使 <input type="number"/> 或 <input type="tel"/> 工作，您需要包含 jQuery 的库。此解决方案也适用于移动设备上的tap events。

<input type="text" placeholder="Search" id="searchItem" onclick="this.focus();this.select()">  

在Codepen 上查看这个工作示例。

Answer 5

对于某些字段，“选择/写入数字”用户界面可能不是某些设备上的数字键盘：增加和减少触发器等不同的东西可能会使文本选择不受欢迎。 这不仅会影响类型编号：“setSelectionRange 方法仅适用于文本、搜索、URL、电话和密码类型的输入”（https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement），因此日期和其他内容也会受到影响。

一个非常简单的方法（可能是这种情况的解决方案）：如何让所需的字段类型为“文本”（因此实际的解决方案仍然有效）并使用“inputmode=numeric”让设备显示它的数字输入 UI？ https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute

...由于它没有被广泛支持，我们可以尝试属性模式，它似乎强制 Ipad 上的数字键盘（没有 Apple 设备检查）pattern="[0-9]*"

<input class="Select" type="text" inputmode="numeric" pattern="[0-9]*">

有人可以检查小提琴在 Apple 设备上是否按预期工作吗？我没有。谢谢。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="Select" type="text" pattern="[0-9]*" inputmode="numeric">

编辑：按照@Apolo 的建议将 fiddle 和 this.value.length 添加到选择范围

编辑：使用 pattern="[0-9]*" ，不知道浏览器之间兼容性的真实状态，正如@Louys 所指出的那样。

Answer 6

是的，我正在疯狂地试图找到这个解决方案。基本上，您必须重新排列事件焦点，然后单击，然后触摸开始。

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  e.preventDefault();
});