我的王国可选文本框

Question

我的王国可选文本框

挑战：

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

多年来一直存在的问题。

问题：

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

选择文字的标准方法是简单地使用：

$('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'：输入元素的类型（'number'）不支持选择。

因此，主代码将不再适用于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

这个怎么样？

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！移动键盘只是消失了......就像焦点一样。不好！<br/>

此刻显示数字小键盘会更糟糕，但不是。

所以我回到这里告诉我，这么简单的解决方案不是移动友好的，这是不使用它的一个很好的理由。我真的试着回答......并充分考验了我的想法。请不要downvote。 ;）

仅供记录：现在直到更好的解决方案，我只需在焦点上完全删除该值而不是选择它......因为用户无论如何都会更改该值。

Answer 4

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

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

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

<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

的建议将小提琴和this.value.length添加到选择范围

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

Answer 5

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

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

Answer 6

使用 JavaScript / jQuery 在<input type="text"/>，<input type="tel"/>或<input type="number"/>内选择文字非常容易。下面是我在整合输入文本或数字时一直使用的代码。在我们的例子中， JavaScript 代码直接添加到输入本身，这使事情更加方便。我们会收听点击活动，然后我们会启动两个内置的 JavaScript 功能：focus()＆amp; 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上查看此工作示例。

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

我的王国可选文本框

挑战：

我们又来了，现在是时候让一些赏金猎人参与此案了！

6 个答案: