在iOS設備的輸入字段中以編程方式選擇文本(mobile Safari)

[英]Programmatically selecting text in an input field on iOS devices (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


85  

setSelectionRange(0, 9999);

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

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

#2


25  

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


23  

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


22  

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


7  

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得到你想要的東西,我設法拼湊了兩個重要的信息來讓它工作。不確定移動瀏覽器。

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

    element.setSelectionRange(0,9999);我們想要

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


3  

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


1  

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


1  

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


0  

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"。這應該是可行的。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2010/07/17/72541f781a1ca1fb23d4fa49aa2e5e56.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com