以编程方式在 iOS 设备的输入栏中选择文本(移动 Safari)

如何在 iOS 设备(例如 iPhone、运行移动 Safari 的 iPad)上以编程方式选择输入字段的文本？

通常在 <input ... />元素上调用 .select()函数就足够了，但是在这些设备上不起作用。光标只是留在现有条目的末尾，而没有进行任何选择。

75954 次浏览
小开

It's hard to prove a negative, but my research suggests this is a bug in Mobile 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.

Your best bet may be a bug report with Apple.

小开

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

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

See Chromium Issue 32865.

小开

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.

小开

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

小开
最佳答案 
input.setSelectionRange(0, 9999);

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

小开

Sorry, in my earlier post, I didn't notice the Javascript implying that you wanted an answer in 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.

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

  2. mouseUp event is undoing the selection

Thus (using Prototype): 

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

does the trick.

Matt

小开

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

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

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

Using plain javascript. Did not try this with 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.

UPDATE:

  • iPod5 - iOS6.0.1 - Working ok.
  • iPad1 - iOS5.1.1 - Only text selected. Tap selection once to open Cut/Copy menu
  • iPad2 - iOS4.3.3 - Only text selected. Tap selection once to open Cut/Copy menu

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

UPDATE: (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.

UPDATE: (14-11-2013)

  • iOS 7.0.3 : Thanks to the comment from binki update that the .selectionStart and .selectionEnd does work.

UPDATE: (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
小开

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.

e.g.

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

小开

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

My solution to this problem was, rearrange the events. First Focus, then Click, then 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.


提交答案