您如何以编程方式在 iOS 设备(例如运行移动 Safari 的 iPhone、iPad)上选择输入字段的文本?
通常在 <input ... />
元素上调用 .select()
函数就足够了,但这在这些设备上不起作用。光标只是留在现有条目的末尾,没有进行任何选择。
这个线程中没有任何东西对我有用,这是在我的 iPad 上有效的:
// t is the input field
setTimeout(function() {
t.setSelectionRange(0, 9999);
}, 1);
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
元素上的点击事件来进行试验
更新:(2013 年 7 月 10 日)
iPod5 - iOS7.0.2 - 使用链接中的小提琴:在输入框中看不到输入的文本。按选择将我重定向到 facebook.com (??? wtf ???) 不知道那里发生了什么。
更新:(2013 年 14 月 11 日)
iOS 7.0.3:感谢 binki 更新的评论,即 .selectionStart 和 .selectionEnd 确实有效。
更新:(15-01-2015)
iOS 8.xx:感谢 Michael Siebert 的评论。取自评论:我必须同时监听焦点和单击事件,然后 setTimeout/_.debounce 使其在两种情况下都起作用:单击输入或通过制表键获得焦点
<input/>
时,iPad 认为我在点击 jsfiddle 的“CSS”窗格(我输入的任何内容都是不可见的)。一旦我将点击指向正确的 <input/>
,您的“选择文本”按钮就可以在 iOS-7.0.3 上完美运行 :-)。
很难证明是否定的,但我的研究表明这是 Mobile Safari 中的一个错误。
请注意,focus() 或多或少有效——尽管它可能需要多次点击才能成功,如果您试图响应用户点击相关字段,则没有必要,因为点击本身会给出该字段重点。不幸的是, select() 在 Mobile Safari 中根本不起作用。
您最好的选择可能是使用 Apple 报告错误。
抱歉,在我之前的帖子中,我没有注意到 Javascript 暗示您需要 Javascript 的答案。
为了使用 javascript 在 UIWebView 中获得你想要的东西,我设法收集了两条重要的信息以使其正常工作。不确定手机浏览器。
element.setSelectionRange(0,9999);做我们想要的 mouseUp 事件正在撤消选择
因此(使用原型):
input.observe('focus', function() { this.setSelectionRange(0, 9999); }); input.observe('mouseup', function(event) { event.stop(); });
成功了。
马特
$("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });
focusin
而不是 focus 才能工作,iOS 7
看起来焦点会起作用,但只有在直接从本机事件调用时才会起作用。使用 SetTimeout 之类的调用焦点不会出现调用键盘。 ios键盘控制很差。这不是一个好情况。
在 Android 2.2 附带的 Webkit 上,以下内容对我有用:
function trySelect(el) {
setTimeout(function() {
try {
el.select();
} catch (e) {
}
}, 0);
}
参见铬 Issue 32865。
在 iPad 上使用 iOS 7 时,我能够完成这项工作的唯一方法是实际使用 <textarea></textarea>
而不是 <input>
字段。
例如
<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>
如何防止用户更改区域内的文本更加困难,因为您将 textarea 设为只读,选择技巧将不再起作用。
我疯狂地寻找这个解决方案,而你的所有回复确实帮助它为我打开了另一罐蠕虫。
客户希望用户能够单击并全选,并让用户在 iPad 上“选项卡”并全选(使用外部键盘。我知道,疯了......)
我对这个问题的解决方案是重新安排事件。首先 Focus,然后 Click,然后 touchstart。
$('#myFUBARid').on('focus click touchstart', function(e){
$(this).get(0).setSelectionRange(0,9999);
//$(this).css("color", "blue");
e.preventDefault();
});
我希望这对某人有所帮助,因为你们帮助了我无数次。
如果您使用的是兼容 HTML5 的浏览器,则可以在 input
标记中使用 placeholder="xxx"
。那应该做的工作。
不定期副业成功案例分享
input.setSelectionRange
之前在输入上触发.focus()
时,这才对我有用。如果您正在监听输入上的focus
事件,请记住考虑无限循环。readonly
属性,这将不起作用。.focus()
时,在focus
处理程序中调用setSelectionRange()
有效,但是当您在 iOS 上手动点击文本输入时,不会发生选择。可以这么说,您需要做的就是在 setTimeout 为 0 内调用setSelectionRange()
,无论什么触发焦点,它都会按预期工作。