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

问题描述 投票:80回答:10

如何以编程方式选择iOS设备上输入字段的文本,例如iPhone,iPad运行手机Safari?

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

javascript iphone html safari ios
10个回答
92
投票
input.setSelectionRange(0, 9999);

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


-4
投票

如果您使用的是符合HTML5标准的浏览器,则可以在placeholder="xxx"标记中使用input。那应该做的。


28
投票

这个帖子中没有任何东西适合我,这是我的iPad上可以使用的:

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

25
投票

很难证明是消极的,但我的研究表明这是Mobile Safari中的一个错误。

请注意,focus()可以或多或少地工作 - 尽管它可能需要多次点击才能成功,并且如果您尝试响应用户点击相关字段时没有必要,因为点按本身会给出字段焦点。不幸的是,select()在Mobile Safari中根本不起作用。

你最好的选择可能是与Apple的错误报告。


23
投票

See this fiddle :(在输入框中输入一些文字,然后点击“选择文字”)

它在我的iPod(第5代iOS 6.0.1)的输入框中选择文本,打开键盘并显示剪切/复制/建议...菜单

使用普通的JavaScript。没有尝试使用jQuery

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

请注意,数字999只是一个示例。您应该将这些数字设置为您要选择的字符数。

更新:

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

对于最后两个,您可以通过触发input元素上的click事件来进行实验

更新:(07-10-2013)

  • iPod5 - iOS7.0.2 - 使用链接中的小提琴:无法在输入框中看到键入的文本。按选择将我重定向到facebook.com(??? wtf ???)不知道那里发生了什么。

更新:(14-11-2013)

  • iOS 7.0.3:感谢binki更新的评论,.selectionStart.selectionEnd确实有效。

更新:(15-01-2015)

  • iOS 8.x.x:感谢Michael Siebert的评论。取自评论:我必须同时收听焦点和点击事件,然后设置时间输出/ _。去抖动以使其在两种情况下都有效:点击输入或通过标签对焦

7
投票

对不起,在我之前的帖子中,我没有注意到Javascript意味着你想在Javascript中得到答案。

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

  1. element.setSelectionRange(0,9999);做我们想要的
  2. mouseUp事件正在撤消选择

因此(使用Prototype):

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

诀窍。

马特


3
投票

看起来焦点会起作用,但只有在从本机事件直接调用时才会起作用。使用类似SetTimeout之类的东西调用焦点不会出现调用键盘。控制ios键盘非常差。这不是一个好的情况。


1
投票

在Android 2.2附带的Webkit上,以下内容适用于我:

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

见Chromium Issue 32865


1
投票

使用iPad上的iOS 7,我能够完成这项工作的唯一方法是使用<textarea></textarea>而不是<input>字段。

EG

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

如何防止用户更改区域内的文本更加困难,因为如果你只使用textarea,那么选择技巧将不再适用。


1
投票

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

客户希望用户能够点击并选择所有,并让用户'选项卡'并在iPad上选择所有(使用外部键盘。我知道,疯了......)

我对这个问题的解决方案是重新排列事件。首先关注,然后点击,然后触摸开始。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.