如何在启用触摸的浏览器中选择输入值？答案

【问题标题】：How to select an inputs value in touch enabled browser?如何在启用触摸的浏览器中选择输入值？
【发布时间】：2014-03-13 00:33:18
【问题描述】：

问题

Safari 不符合标准文本框/输入约束。 maxlength 和 javascript select() 都没有按预期输出。

<input type="text" value="12345" maxlength="5" onFocus="this.select();">

经过一些广泛的测试，我发现了以下内容：

问题

在触控设备上使用 Safari 时：

（我的测试设备是 ipad，所以问题可能是触摸输入设备，我没有在非触摸式 Safari 浏览器上测试过。）

小提琴

http://jsfiddle.net/p2vts/5/

【问题讨论】：

【解决方案1】：

选择对焦点不起作用，请尝试使用onClick="this.select();"

【讨论】：

感谢您的意见。经过测试，在使用非触摸设备时，onFocus 比 onClick 效果更好，因为它允许在从非点击事件（例如 javascript 选项卡）应用焦点时选择一个值。使用触摸浏览器时 OnFocus 失败，但是在 Safari 中使用触摸时使用 onClick 不会选择输入值。

【解决方案2】：

最大长度

最大长度将限制允许的字符数。

Safari 在使用 type="number"

时不支持 maxlength

最大

使用 type="number" 时，建议使用 min 和 max 来创建值范围。

Safari 不支持 min 和 max 值。

目前我建议结合使用 max 和 maxlength 以获得最大的兼容性：

<input class="Max" type="number" value="12345" maxlength="5" min="0" max="99999">

对于 Safari，我会结合使用 javascript 和 regex 来创建输入限制。

JAVASCRIPT (JQUERY)

$(".Max").keyup(function() {
    $(".Max").val(this.value.match(/^.{0,5}$/));
});

正则表达式

. 允许任何字符。

\d 替换为 \d 以仅允许数字。

{0,5} 0 是最小长度，5 是最大长度。

【讨论】：