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

【问题标题】：Programmatically selecting text in an input field on iOS devices (mobile Safari)以编程方式在 iOS 设备（移动 Safari）上的输入字段中选择文本
【发布时间】：2011-03-17 08:54:22
【问题描述】：

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

通常在<input ... /> 元素上调用.select() 函数就足够了，但这在这些设备上不起作用。光标只是留在现有条目的末尾，没有进行任何选择。

【问题讨论】：

我看不出作为触摸设备会改变预选文本相关性的任何原因。你所说的触控设备同样可以说是非触控设备。当用户选择触摸项目进行编辑时，我想预先选择文本。在大多数情况下，用户可能想要替换现有内容，在这种情况下，他们无需任何进一步的触摸和拖动就可以做到这一点。在其他情况下，当他们想要编辑现有内容时，他们可以取消选择或更改选择。
不幸的是 .focus().select() 不起作用。
我开始在这个问题上悬赏。我的目标是让用户很容易点击我的文本区域并点击“复制”将文本复制到剪贴板。
Same here.. 似乎有很多方法在 Mobile Safari 中不起作用 .select() 和 .focus() 就是其中两个。
@sroebuck David W. Keith 的好答案！竖起大拇指！

标签： javascript iphone html safari ios

【解决方案1】：

input.setSelectionRange(0, 9999);

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

【讨论】：

这对我有用，但必须包括在相同的输入上停止 mouseup。
这对我在 iPad 或 iPhone 上都不起作用
这只有在我在调用input.setSelectionRange 之前在输入上触发.focus() 时才对我有用。如果您正在侦听输入上的 focus 事件，请记住考虑无限循环。
一个值得一提的问题：如果 textareas 设置了 readonly 属性，这将不起作用。
我花了一个多小时研究各种解决方案。当您以编程方式触发.focus() 时，在focus 处理程序中调用setSelectionRange() 有效，但是当您在iOS 上手动点击文本输入时，不会发生选择。可以这么说，您需要做的就是在 setTimeout 为 0 内调用 setSelectionRange()，无论什么触发焦点，它都会按预期工作。

【解决方案2】：

我在寻找这个解决方案时发疯了，虽然您的所有回复确实有帮助，但它为我打开了另一罐蠕虫。

客户希望用户能够单击并全选，还让用户在 iPad 上'tab'并全选 strong>（带有外接键盘。我知道，疯了...）

我对这个问题的解决方案是重新安排事件。首先Focus，然后点击，然后touchstart。

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

我希望这对某人有所帮助，因为你们帮助了我无数次。

【讨论】：

【解决方案3】：

很难证明是否定的，但我的研究表明这是 Mobile Safari 中的一个错误。

请注意，focus() 或多或少有效——尽管它可能需要多次点击才能成功，如果您试图响应用户点击相关字段，则没有必要，因为点击本身会给予领域焦点。不幸的是，select() 在 Mobile Safari 中根本不起作用。

您最好的选择可能是使用Apple 提交错误报告。

【讨论】：

我们的测试表明相同。这是移动 Safari 中的一个错误/缺失功能。
FWIW，它适用于同样基于 WebKit 的 Chrome 桌面和 Android 浏览器。

【解决方案4】：

See this 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 使其在两种情况下都有效：单击输入或通过 Tab 键聚焦

【讨论】：

你是我今天的英雄！奇迹般有效！ ;-)
@andi1984 我在哪里领取英雄徽章？
你知道其他iOS版本的兼容性吗？它适用于 iOS5 和 iOS4 吗？
在 iOS6 上为我工作但 a) 在桌面 Chrome 上不起作用 b) 在禁用文本输入时不起作用:( 我的用例：我生成唯一的 URL 并希望促进共享。
@barts 我猜你最终选择了 Facebook，因为 jsfiddle 上的“分享”菜单一定是乱七八糟的，而且可能是不可见的。在 iPad 上使用 iOS-7.0.3 进行测试时，我自己最终点击了不可见的 Twitter 按钮。我还发现，当我以为我在点击你的<input/> 时，iPad 以为我在点击 jsfiddle 的“CSS”窗格（我输入的任何内容都是不可见的）。一旦我将点击指向正确的<input/>，您的“选择文本”按钮在 iOS-7.0.3 上就可以正常工作了:-)。

【解决方案5】：

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

例如

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

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

【讨论】：

【解决方案6】：

如果您使用的是兼容 HTML5 的浏览器，则可以在 input 标记中使用 placeholder="xxx"。这应该可以完成这项工作。

【讨论】：

我认为这不是问题所要问的

【解决方案7】：

此线程中的任何内容都对我有用，以下是在我的 iPad 上有效的内容：

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

【讨论】：

这玩意儿！谢谢！适用于“点击”事件
非常感谢！！

【解决方案8】：

抱歉，在我之前的帖子中，我没有注意到 Javascript 暗示您需要 Javascript 中的答案。

为了使用 javascript 在 UIWebView 中获得您想要的内容，我设法收集了两条重要信息以使其正常工作。不确定移动浏览器。

element.setSelectionRange(0,9999); 做我们想做的事
mouseUp 事件正在撤消选择

因此（使用原型）：

input.observe('焦点', function() { this.setSelectionRange(0, 9999); }); input.observe('mouseup', function(event) { 事件.stop(); });

成功了。

马特

【讨论】：

我们遇到了同样的问题，发现您的解决方案有效 - 但我们使用的是 jquery（实际上是移动设备）。 /* 选择填充中的文本 */ $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; } );
我在 iPad 和 iPhone 上使用 iOS 8，来自@DuStorm 的代码（在上面的评论）是这里给出的所有答案中唯一对我有用的东西。重申一下，以下内容至少适用于 Chrome 和 Safari 中的 iOS 8：$("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });
我必须使用 focusin 而不是 focus 才能正常工作，iOS 7

【解决方案9】：

看起来焦点会起作用，但只有在直接从本机事件调用时才会起作用。使用 SetTimeout 之类的调用焦点不会出现调用键盘。 ios键盘控制很差。情况不妙。

【讨论】：

【解决方案10】：

在 Android 2.2 附带的 Webkit 上，以下内容对我有用：

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

请参阅 Chromium Issue 32865。

【讨论】：