在iOS设备上（移动Safari），通过编程方式选择输入字段中的文本

Question

如何在iOS设备上通过编程的方式选择输入字段中的文本，例如在运行移动Safari的iPhone或iPad上？

通常可以在<input ... />元素上调用.select()函数即可完成选择，但在这些设备上无法实现。在这种情况下，光标只会停留在现有条目的末尾，没有任何文本被选中。

- sroebuck

---

我不认为使用触摸设备会改变预选文本的相关性，你所说的关于触摸设备的情况同样适用于非触摸设备。当用户选择触摸某个项目进行编辑时，我想要预先选择文本。在大多数情况下，用户可能想要替换现有内容，在这种情况下，他们可以直接进行操作而无需进一步触摸和拖动。在其他情况下，当他们想要编辑现有内容时，他们可以取消选择或更改选择。 - sroebuck

很遗憾，.focus().select() 不起作用。 - sroebuck

我正在这个问题上发起悬赏。我的目标是让用户轻松地点击我的文本区域并点击“复制”以将文本复制到剪贴板中。 - Dan Fabulich

同样的问题在这里。在移动Safari中，有很多方法似乎无法正常工作，其中包括.select()和.focus()。 - user480920

@sroebuck 给 David W. Keith 的回答很好！点赞！ - eyurdakul

Answer 1

input.setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select

- jobwat

---

这对我有用，但必须包括停止相同输入上的mouseup。 - DuStorm

我在iPad和iPhone上都尝试过，但这并没有成功。 - Doug

只有在我调用 input.setSelectionRange 之前，对输入框触发 .focus() 才能使它起作用。如果你正在监听输入框的 focus 事件，请记得考虑无限循环的情况。 - allieferr

值得一提的问题是：如果 textarea 元素设置了 readonly 属性，这种方法将无法生效。 - JayPea

我花了一个多小时尝试不同的解决方案。在 focus 处理程序中调用 setSelectionRange() 可以在通过编程方式触发 .focus() 时有效，但是当你手动在 iOS 上点击文本输入框时，选择操作不会发生。简单来说，你只需要在一个 setTimeout 中调用 setSelectionRange()，并将时间设置为 0，无论是什么触发焦点，它都可以按预期工作。 - user2609094

Answer 2

我在此线程中尝试过所有方法都没有用，以下是适用于我的iPad的方法：

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

- nkrop

---

这个东西真是太棒了！谢谢！它可以与“click”事件一起使用。 - saike

非常感谢你！！ - Vaclav Kusak

Answer 3

点击这个fiddle链接：（在输入框中输入一些文本，然后单击“选择文本”）

它可以在我的iPod上（第5代iOS6.0.1）选择输入框中的文本，打开键盘并显示剪切/复制/建议菜单。

使用普通JavaScript。没有尝试过使用jQuery。

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

请注意，数字999只是一个示例。您应该将这些数字设置为您想要选择的字符数。 更新： iPod5-iOS6.0.1-工作正常。 iPad1-iOS5.1.1-仅选择文本。点击一次选择以打开剪切/复制菜单。 iPad2-iOS4.3.3-仅选择文本。点击一次选择以打开剪切/复制菜单。 对于最后两个，您可以尝试在input元素上触发单击事件。 更新：（07-10-2013） iPod5-iOS7.0.2-使用链接中的小工具：无法在输入框中看到键入的文本。按下选择按钮会将我重定向到facebook.com（？？？ wtf？？？）不知道发生了什么。 更新：（14-11-2013）

• iOS 7.0.3 : 感谢binki的评论，说明.selectionStart 和 .selectionEnd确实有效。

更新：（15-01-2015）

• iOS 8.x.x : 感谢Michael Siebert的评论。来自评论： 我必须同时侦听焦点和点击事件，然后setTimeout /_.debounce才能使它在两种情况下都起作用：单击输入或通过制表符进行焦点。

- bart s

---

@andi1984 我在哪里申请英雄徽章？ - bart s

你知道它是否兼容其他iOS版本吗？它能在iOS5和iOS4上运行吗？ - andi1984

在我的iOS6上可以工作，但是a）在桌面版Chrome上不起作用b）当文本输入被禁用时也不起作用:( 我的使用情况：我生成唯一的URL并希望促进共享。 - Mars Robertson

@barts 我猜你最终进入了Facebook，是因为jsfiddle的“分享”菜单可能出了问题，而且在不可见时也可以点击。当我在iPad上测试iOS-7.0.3时，我自己也误点了不可见的Twitter按钮。我还发现，当我以为我在点击你的<input/>时，iPad认为我在点击jsfiddle的“CSS”面板（在那里我输入的任何内容都是不可见的）。一旦我把我的点击指向了正确的<input/>，你的“选择文本”按钮在iOS-7.0.3上就完美地工作了 :-). - binki

@binki 实际上，我并没有在“CSS”窗格中点击，而是在jsfiddle的“分享”下拉菜单中点击了“嵌入此代码”或类似的文本。 - binki

Answer 4

很难证明一个否定的事情，但我的研究表明这是Mobile Safari中的一个漏洞。

请注意，焦点（focus()）功能基本可用——尽管可能需要多次点击才能成功，并且如果您正在尝试响应有关字段的用户点击，则不需要焦点功能，因为点击本身会使该字段聚焦。不幸的是，在Mobile Safari中, 选择（select()）是根本无法正常工作。

您最好向苹果公司提交一个漏洞报告。

- clozach

---

我们的测试结果也表明了这一点。这是移动版Safari中的一个错误/缺失功能。 - Nir Levy

就此而言，它在Chrome桌面版和Android浏览器上运行良好，这些浏览器也是基于WebKit的。 - jrummell

Answer 5

抱歉，在我早先的帖子中，我没有注意到JavaScript意味着你想要JavaScript答案。

为了在UIWebView中使用javascript获取你想要的内容，我已经搜集到两个重要的信息来使其工作。关于移动浏览器不能确定。

1. element.setSelectionRange(0,9999);可以实现我们想要的功能。

2. 鼠标弹起事件会撤销所选内容。

因此（使用Prototype）：

    input.observe('focus', function() {
      this.setSelectionRange(0, 9999);
    });
    input.observe('mouseup', function(event) {
      event.stop();
    });

就可以解决问题。

Matt

- Matt

---

我们遇到了同样的问题，并发现你的解决方案可行 - 但我们正在使用jQuery（实际上是移动版）。/选择填充内容中的文本/ $("input").focus(function() { this.setSelectionRange(0,9999); return false; }).mouseup(function() { return false; }); - DuStorm

我在iPad和iPhone上使用iOS 8，而@DuStorm（在此评论上面）的代码是所有答案中唯一对我有效的东西。再次强调，在Chrome和Safari中，以下内容至少可以正常工作：$("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; }); - Aaron Jessen

我必须使用 focusin 而不是 focus 才能使其工作，iOS 7。 - Lucas

Answer 6

看起来聚焦(focus)会起作用，但仅当从本地事件直接调用时。使用类似SetTimeout的方法调用聚焦并不会调出键盘。控制iOS键盘非常困难。这并不是一个好的情况。

- yodaisgreen

Answer 7

我为了解决这个问题而疯狂寻找，虽然你们的回答都有所帮助，但这让我又遇到了另一个难题。

客户想让用户能够点击并选择全部内容，同时还要让用户在iPad上使用外部键盘通过“tab”键选择全部内容（是的，很疯狂……）

我解决这个问题的方法是，重新排列事件顺序。首先是焦点，然后是点击，最后是touchstart。

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

我希望这能帮助到某些人，就像你们无数次帮助了我一样。

- adnan tariq

Answer 8

以下类似的内容在我使用的Android 2.2自带的Webkit上可以正常工作：

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

请参见Chromium 问题32865。

- robocat

Answer 9

在iPad上，使用iOS 7版本，我唯一能够使这个工作的方法是实际使用 <textarea></textarea> 而不是 <input> 字段。

例如：

<textarea onclick="this.setSelectionRange(0, 9999);">当点击文本区域时，我的文本将被选中。</textarea>

如何防止用户更改文本区域内的文本更加困难，因为如果将 textarea 设为只读，则选择技巧将不再起作用。

- Mikael Lepistö

Answer 10

如果您正在使用符合HTML5标准的浏览器，您可以在input标签中使用placeholder="xxx"。这样就可以完成任务了。

- DrMad

---

我认为这不是问题所要求的。 - caitriona