在iOS设备的输入字段中以编程方式选择文本(mobile Safari)

How do you programmatically select the text of an input field on iOS devices, e.g. iPhone, iPad running mobile Safari?

如何通过编程方式在iOS设备上选择输入字段的文本，例如iPhone、运行mobile Safari的iPad ?

Normally it is sufficient to call the .select() function on the <input ... /> element, but this does not work on those devices. The cursor is simply left at the end of the existing entry with no selection made.

通常，调用元素，但在这些设备上不适用。光标仅仅留在现有条目的末尾，不做任何选择。

10 个解决方案

#1

setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select

#2

Nothing in this thread worked for me, here's what works on my iPad:

这条线对我来说没有任何效果，下面是我iPad上的效果:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

#3

See this fiddle: (enter some text in the input box and click 'select text')

(在输入框中输入一些文本并单击“选择文本”)

It is selecting text in an inputbox on my iPod (5th gen iOS6.0.1), opening the keyboard and also showing the Cut/Copy/Suggest... menu

它在我的iPod(第五代iOS6.0.1)的输入框中选择文本，打开键盘并显示剪切/复制/建议……菜单

Using plain javascript. Did not try this with jQuery

使用纯javascript。没有尝试过jQuery吗

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

Note that the number 999 is just a sample. You should set these numbers to the number of characters you want to select.

注意，999这个数字只是一个样本。您应该将这些数字设置为要选择的字符数。

UPDATE:

更新:

iPod5 - iOS6.0.1 - Working ok.
iPod5 - iOS6.0.1 -工作正常。
iPad1 - iOS5.1.1 - Only text selected. Tap selection once to open Cut/Copy menu
iPad1 - iOS5.1.1 -只选择文本。点击一次选择，打开剪切/复制菜单
iPad2 - iOS4.3.3 - Only text selected. Tap selection once to open Cut/Copy menu
iPad2 - iOS4.3.3 -只选择文本。点击一次选择，打开剪切/复制菜单

For the last two, you might experiment by triggering a click event on the input element

对于最后两个，您可以尝试在输入元素上触发单击事件

UPDATE: (07-10-2013)

更新:(07-10-2013)

iPod5 - iOS7.0.2 - Using the fiddle in the link: Can't see typed text in input box. Pressing select redirects me to facebook.com (??? wtf ???) no idea what's going on there.
iPod5 - iOS7.0.2 -在链接中使用fiddle:在输入框中看不到输入文本。按下select将我重定向到facebook.com (??? ?什么?)不知道那里发生了什么。

UPDATE: (14-11-2013)

更新:(14-11-2013)

iOS 7.0.3 : Thanks to the comment from binki update that the .selectionStart and .selectionEnd does work.
iOS 7.0.3:由于binki更新的评论，. selectionstart和. selectionend确实有效。

UPDATE: (15-01-2015)

更新:(15-01-2015)

iOS 8.x.x : Thanks to the comment from Michael Siebert. Taken from the comment: I had to listen for both focus AND click events and then setTimeout/_.debounce to make it work in both cases: click the input or focus through tabbing
iOS 8. x。x:感谢Michael Siebert的评论。从注释中可以看出:我必须同时监听焦点和单击事件，然后设置timeout /_.debounce以便在这两种情况下都能工作:通过制表来单击输入或焦点

#4

It's hard to prove a negative, but my research suggests this is a bug in Mobile Safari.

很难证明它是负面的，但我的研究表明这是移动Safari中的一个漏洞。

Note that focus() works, more or less—though it can require more than one tap to succeed, and it's not necessary if you're trying to respond to a user tap on the field in question as the tap itself will give the field focus. Unfortunately, select() is simply non-functional in Mobile Safari.

请注意，focus()或多或少都可以工作，尽管它可能需要多个点击才能成功，而且如果您试图响应用户对该字段的点击，则没有必要这样做，因为该点击本身将提供字段焦点。不幸的是，select()在Mobile Safari中是简单的非功能性的。

Your best bet may be a bug report with Apple.

你最好的选择可能是苹果的bug报告。

#5

Sorry, in my earlier post, I didn't notice the Javascript implying that you wanted an answer in Javascript.

抱歉，在我之前的文章中，我没有注意到Javascript暗示要用Javascript给出答案。

To get what you want in UIWebView with javascript, I have managed to scrape together two important pieces of info to get it to work. Not sure about the mobile browser.

为了在UIWebView中使用javascript得到你想要的东西，我设法拼凑了两个重要的信息来让它工作。不确定移动浏览器。

element.setSelectionRange(0,9999); does what we want

element.setSelectionRange(0,9999);我们想要
mouseUp event is undoing the selection

mouseUp事件正在取消选择

Thus (using Prototype):

因此(使用原型):

    input.observe('focus', function() {
      this.setSelectionRange(0, 9999);
    });
    input.observe('mouseup', function(event) {
      event.stop();
    });

does the trick.

就可以了。

Matt

马特

#6

It looks like focus will work but only when directly called from a native event. calling focus using something like SetTimeout does not appear call up the keyboard. Control of the ios keyboard is very poor. Its not a good situation.

看起来只有在直接从本地事件调用时才会使用focus。使用SetTimeout之类的方法调用focus不会出现调用键盘。ios键盘的控制很差。情况不太好。

#7

Something like the following is working for me for me on Webkit that comes with Android 2.2:

以下是我在Android 2.2附带的Webkit上的经验:

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

See Chromium Issue 32865.

看到铬发行32865。

#8

With iOS 7 on iPad the only way that I was able to make this work was to use actually <textarea></textarea> instead of <input> field.

使用iPad上的ios7，我能够完成这项工作的唯一方法是使用而不是 field。

e.g.

如。

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

< textarea onclick = "。setSelectionRange(0,9999);">我的文本将在textarea被点击时被选中。。

How to prevent user from changing text inside area was more difficult, since is you make textarea readonly the selection trick won't work anymore.

如何防止用户在区域内更改文本更加困难，因为您使textarea readonly选择技巧不再有效。

#9

I went nuts looking for this solution, while all your responses did help it opened another can of worms for me.

我疯狂地寻找这个解决方案，而你所有的回答确实帮我打开了另一罐虫子。

The client wanted the user to be able to click and select all, and also let the user 'tab' and select all on the iPad (with an external keyboard. I know, crazy...)

客户端希望用户能够单击并选择all，并让用户“tab”选择iPad上的all(使用外部键盘)。我知道,疯狂……)

My solution to this problem was, rearrange the events. First Focus, then Click, then touchstart.

我解决这个问题的办法是，重新安排事件。首先聚焦，然后点击，然后点击touchstart。

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

I hope this helps someone, as you lot have helped me countless times.

我希望这能帮助一些人，因为你们已经无数次地帮助了我。

#10

-4

If you are using HTML5-compliant browsers, you can use placeholder="xxx" in your input tag. That should do the job.

如果使用符合html 5的浏览器，可以在输入标记中使用占位符="xxx"。这应该是可行的。

#1

setSelectionRange(0, 9999);