Question

我们正在为移动浏览器开发Web-App，我们希望只要输入框获得焦点，就可以选择任何输入框的文本。以下答案修复了Desktop chrome / safari浏览器的问题。以下解决方案适用于Android浏览器，但不适用于iPhone / iPad浏览器，任何解决方案..

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

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

价： -

Selecting text on focus using jQuery not working in Safari and Chrome

Answer 1

在此处找到答案不知道如何将此问题标记为重复。 Programmatically selecting text in an input field on iOS devices (mobile 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
用于处理touchend或mouseup事件的规范化事件

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

编辑：不应使用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;
       }

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

4 个答案: