使用jQuery在iPhone iPad浏览器中无法选择焦点文本

Question

我们正在为移动浏览器开发Web应用程序，我们希望在任何输入框获得焦点时都能选择任何输入框的文本。以下答案修复了桌面chrome/safari浏览器的问题。以下解决方案适用于Android浏览器，但不适用于iPhone/iPad浏览器，任何解决方案。。

$("#souper_fancy").focus(function() { $(this).select() });
$("#souper_fancy").mouseup(function(e){
        e.preventDefault();
});

参考：-

使用jQuery在Safari和Chrome 中选择焦点文本

Answer 1

在此处找到答案不知道如何将这个问题标记为重复。在iOS设备（移动Safari）的输入字段中编程选择文本

我的修复程序如下：-

<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>

Answer 2

也许可以试试这个：

vmouseup
用于处理触摸端或鼠标上移事件的标准化事件

• http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

JS:

$("#souper_fancy").focus(function() { 
    $(this).select();
});
$("#souper_fancy").vmouseup(function(e){
    e.preventDefault();
});

Answer 3

您可以使用document.execCommand('selectAll');。但是，如果用户滚动页面，则会显示复制/粘贴菜单。

这就是我使用的：

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();
            }
        }
    }
}

这引用了一些内部函数：

• mojo.isTouch-适用于触摸设备
• core.iosDevice-适用于iOS设备
• mojo.isInput-测试输入元素
• mojo.activeElement（）-document.activeElement

edit:不应使用document.execCommand('selectAll');，而应使用el.setSelectionRange(0, el.value.length);。这在iOS5上似乎很好……在iOS4上可能不起作用（我没有iOS4设备可以测试）。

Answer 4

这个对我有用。

        $("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;
       }