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

Posted 2023-03-11

【中文标题】点击/单击选择输入/文本框字段的内容

【英文标题】：Select the content of input / textbox field on tap / click

【发布时间】：2014-12-13 06:00:57

【问题描述】：

可选文本框的我的王国

---

挑战：

创建一个 '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.

【问题讨论】：

对我来说，简单地使用$('.element').on("click tap", function()stuff here); 总是有效的（在响应式网页设计和混合应用程序中）。请注意，使用“.on”允许您组合事件，其中诸如 .click 之类的东西将在某一时刻被弃用。 -- 如果这不起作用，总是可以选择使用.on("touchend") 或touchstart。我希望这会有所帮助。

【参考方案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);

【讨论】：

因为target应该总是有一个value属性（input/textarea），我宁愿用event.target.selectionEnd = event.target.value.length;

999 的限制太远了，但我绝对同意@Apolo 关于 event.target.value.length 的选择。

我同意，伙计们。全面披露：我不是 Javascript 开发人员，我只是通过对方法中可用内容的肤浅了解来解决这个问题。 event.target.value.length 显然更好。

【参考方案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

【讨论】：

感谢锤子的建议，但是你的小提琴不起作用，这仍然会在数字输入上失败。对吗？

对于数字字段，需要其他方法来选择值，但点击功能也适用于数字输入。

【参考方案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！移动键盘刚刚消失……就像焦点一样。不好！

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

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

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

【讨论】：

我实际上需要一个针对手机/平板电脑用户的解决方案。让我头疼的是ipad。这似乎是一个创意，但非常 hacky :)

我讨厌这种“数字”输入类型！！！ HTML5 标准开发人员的想法真是太糟糕了。这种输入类型唯一有用的是数字键盘。不好的是没有其他方法可以触发它。必须忍受不支持 maxlenght 等限制，在 javascript 填充上清除前导零......还有没有人会使用的丑陋旋转框呢！顺便说一句，我用来隐藏那个东西的解决方案在这里：***.com/questions/3790935/…

@Obsidian：你的问题不正是关于如何破解 HTML 以获得想要的结果吗？ ;)

@Louys 您可以使用 inputmode="numeric" 触发它。这是类型编号的默认值，但您可以在文本字段中使用它。在我的答案和规范中检查它：html.spec.whatwg.org/multipage/… & html.spec.whatwg.org/multipage/…

@Miguel：有趣！我不知道这个属性......这似乎是在 HTML 5.1 中建议的。当然，它既不适用于 Android 浏览器，也不适用于 Android 版 Chrome。我刚试了一下。我找到了这个特定的跨浏览器状态信息：wufoo.com/html5/attributes/23-inputmode.html

【参考方案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 上查看这个工作示例。

【讨论】：

这是使用 javascript 选择文本的标准方法。它是股票代码的一部分，但由于上述问题，这不适用于苹果设备。

【参考方案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 所指出的那样。

【参考方案6】：

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

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