Javascript 以编程方式在 iOS 设备（移动 Safari）的输入字段中选择文本

Programmatically selecting text in an input field on iOS devices (mobile Safari)

提问by sroebuck

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

您如何以编程方式选择 iOS 设备（例如运行移动 Safari 的 iPhone、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.

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

回答by jobwat

input.setSelectionRange(0, 9999);

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

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

回答by nkrop

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

回答by clozach

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

很难证明是否定的，但我的研究表明这是 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() issimply non-functional in Mobile Safari.

请注意，focus() 或多或少都有效——尽管它可能需要多次点击才能成功，如果您尝试响应用户点击相关字段，则没有必要，因为点击本身会提供该字段重点。不幸的是，选择（）是简单地在移动Safari浏览器不起作用。

Your best bet may be a bug report with Apple.

您最好的选择可能是向Apple提交错误报告。

回答by bart s

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（第 5 代 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.
• 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

• iPod5 - iOS6.0.1 - 工作正常。
• iPad1 - iOS5.1.1 - 仅选择文本。点击选择一次打开剪切/复制菜单
• iPad2 - iOS4.3.3 - 仅选择文本。点击选择一次打开剪切/复制菜单

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

对于最后两个，您可以通过在input元素上触发点击事件来进行试验

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 - 使用链接中的小提琴：在输入框中看不到键入的文本。按选择将我重定向到 facebook.com (??? wtf ???) 不知道那里发生了什么。

UPDATE:(14-11-2013)

更新：(14-11-2013)

• iOS 7.0.3 : Thanks to the comment from binkiupdate that the .selectionStartand .selectionEnddoeswork.

• 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.xx：感谢Michael Siebert的评论。摘自评论：我必须同时监听焦点和单击事件，然后 setTimeout/_.debounce 才能使其在两种情况下都能正常工作：通过选项卡单击输入或焦点

回答by Matt

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 UIWebViewwith javascript, I have managed to scrape together two important pieces of info to get it to work. Not sure about the mobile browser.

为了使用javascript在UIWebView 中获得您想要的内容，我设法将两个重要的信息拼凑在一起以使其正常工作。不确定移动浏览器。

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

2. mouseUp event is undoing the selection

1. element.setSelectionRange(0,9999);做我们想做的事

2. mouseUp 事件正在撤消选择

Thus (using Prototype):

因此（使用原型）：

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

does the trick.

诀窍。

Matt

马特

回答by yodaisgreen

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.

看起来焦点会起作用，但仅当直接从本机事件调用时才有效。使用 SetTimeout 之类的方法调用焦点不会出现调用键盘。ios键盘的控制很差。这不是一个好情况。

回答by robocat

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.

请参阅 Chromium问题 32865。

回答by Mikael Lepist?

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 上的 iOS 7，我能够完成这项工作的唯一方法是使用实​​际<textarea></textarea>而不是<input>字段。

e.g.

例如

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

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

如何防止用户更改区域内的文本更加困难，因为如果您将 textarea 设为只读，则选择技巧将不再起作用。

回答by adnan tariq

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

我疯狂地寻找这个解决方案，而您的所有回复确实帮助它为我打开了另一罐蠕虫。

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

客户希望用户能够单击并全选，并让用户在 iPad 上“标签”并全选（使用外部键盘。我知道，疯了……）

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

我对这个问题的解决方案是，重新安排事件。首先Focus，然后Click，然后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.

我希望这对某人有所帮助，因为你们已经帮助了我无数次。

回答by DrMad

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

如果您使用的是 HTML5 兼容的浏览器，则可以placeholder="xxx"在您的input标签中使用。那应该可以完成这项工作。