使用jQuery选择焦点文本在iPhone iPad浏览器中不工作[重复]

This question already has an answer here:

这个问题已经有了答案:

Programmatically selecting text in an input field on iOS devices (mobile Safari) 10 answers
在iOS设备(mobile Safari)的输入字段中以编程方式选择文本10个答案

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

使用jQuery在Safari和Chrome中选择不工作的文本

4 个解决方案

#1

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设备的输入字段中以编程方式选择文本(mobile 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>

#2

Maybe try this:

也许试试这个:

vmouseup
Normalized event for handling touchend or mouseup events

vmouseup规范化事件，用于处理touchend或mouseup事件

http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
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();
});

#3

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
魔力。isTouch -适用于触控设备
core.iosDevice - true for an iOS device
核心。iosDevice -适用于iOS设备
mojo.isInput - tests for an input element
魔力。isInput -对输入元素的测试
mojo.activeElement() - document.activeElement
——document.activeElement mojo.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设备可以测试)。

#4

-1

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

#1