使用 jQuery 选择焦点文本在 iPhone iPad 浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9924506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Selecting text on focus using jQuery not working in iPhone iPad Browsers
提问by Anand
We are developing Web-App for Mobile browsers, we would like text of any input box to get selected whenever input-box get focus. Below answer fixes the issue for Desktop chrome/safari browser. Below solution works fine on Android browser, but not on iPhone/iPad browsers, any solution..
我们正在为移动浏览器开发 Web 应用程序，我们希望在输入框获得焦点时选择任何输入框的文本。以下答案解决了桌面 Chrome/safari 浏览器的问题。以下解决方案适用于 Android 浏览器，但不适用于 iPhone/iPad 浏览器，任何解决方案..
$("#souper_fancy").focus(function() { $(this).select() });
$("#souper_fancy").mouseup(function(e){
e.preventDefault();
});
Ref:-
参考：-
Selecting text on focus using jQuery not working in Safari and Chrome
采纳答案by Anand
Answer found here don't know how to mark this question as duplicate. Programmatically selecting text in an input field on iOS devices (mobile Safari)
此处找到的答案不知道如何将此问题标记为重复。 以编程方式在 iOS 设备（移动 Safari）的输入字段中选择文本
My fix look like this:-
我的修复看起来像这样：-
<script type="text/javascript">
$('div,data-role=page').live('pageshow', function (event) {
jQuery.validator.unobtrusive.parse(".ui-page-active form");
$("input[type='text'], textarea, input[type='password'], input[type='number']").live('mouseup', function (e) { e.preventDefault(); });
$("input[type='text'], textarea, input[type='password'], input[type='number']").live('focus', function () {this.setSelectionRange(0, 9999); });
});
</script>
回答by robocat
You can use document.execCommand('selectAll');. However if the user scrolls the page, you will get the copy/paste menu showing.
您可以使用document.execCommand('selectAll');. 但是，如果用户滚动页面，您将看到复制/粘贴菜单显示。
This is what I use:
这是我使用的：
function trySelect(el, evenInactive, select_ios) {
var select = function() {
try {
if (mojo.isTouch && select_ios && core.iosDevice && mojo.isInput(el) && document.execCommand) {
document.execCommand('selectAll');
} else {
el.select();
}
} catch (e) {
}
};
if (el && el.select && !el.disabled && (!el.readOnly || el.selectReadOnly) && mojo.isInput(el)) {
if (evenInactive || mojo.activeElement() === el) {
if (mojo.isTouch && core.webkitVer) { // http://code.google.com/p/chromium/issues/detail?id=32865
setTimeout(select, 0);
} else {
select();
}
}
}
}
That references some internal functions:
引用了一些内部函数：
- mojo.isTouch - true for a touch device
- core.iosDevice - true for an iOS device
- mojo.isInput - tests for an input element
- mojo.activeElement() - document.activeElement
- mojo.isTouch - 适用于触摸设备
- core.iosDevice - 适用于 iOS 设备
- mojo.isInput - 测试输入元素
- mojo.activeElement() - document.activeElement
edit: document.execCommand('selectAll');should not be used and el.setSelectionRange(0, el.value.length);used instead. That seems to work fine on iOS5... It might not work on iOS4 (I don't have an iOS4 device to test on).
编辑：document.execCommand('selectAll');不应使用并el.setSelectionRange(0, el.value.length);改为使用。这似乎在 iOS5 上运行良好......它可能无法在 iOS4 上运行（我没有要测试的 iOS4 设备）。
回答by Phill Pafford
Maybe try this:
也许试试这个：
vmouseup
Normalized event for handling touchend or mouseup events
vmouseup
标准化事件，用于处理 touchend 或 mouseup 事件
JS:
JS：
$("#souper_fancy").focus(function() {
$(this).select();
});
$("#souper_fancy").vmouseup(function(e){
e.preventDefault();
});
回答by Ram
This one works for me.
这个对我有用。
$("input[type='text'],select,textarea").focus(function () {
$(this).addClass('text-focus');
});
$("input[type='text'],select,textarea").blur(function () {
$(this).removeClass('text-focus');
});
.text-focus
{
border: 1px solid #ea9a00;
}
