使触摸屏无法选择文本输入？答案

【问题标题】：Make text input unselectable for touchscreens?使触摸屏无法选择文本输入？
【发布时间】：2012-05-28 13:32:06
【问题描述】：

我正在使用 jQuery UI 来制作一个范围滑块。该插件在 html 中创建一个文本输入以显示范围值。问题是文本区域在触摸屏设备上是可选的，即使它当时不可编辑。

如何阻止文本输入变为可选状态？我尝试了以下 CSS：

-moz-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 user-select: none;

还有下面的jQuery：

$("#amount, #amount2").mousedown(function (evt) {
       evt.stopImmediatePropagation();
       return false;
   });

$("#amount, #amount2").disableSelection();

【问题讨论】：

标签： jquery jquery-ui mobile input touchscreen

【解决方案1】：

似乎 CSS user-select CSS 方法确实有效（至少在 Chromium 18/Ubuntu 11.04 中：

#amount {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none;
}

JS Fiddle demo.

【讨论】：

【解决方案2】：

编辑：您可以像这样创建自己的disableSelection()：

jQuery.fn.extend({ 
        disableSelection : function() { 
                return this.each(function() { 
                        this.onselectstart = function() { return false; }; 
                        this.unselectable = "on"; 
                        jQuery(this).css('user-select', 'none'); 
                        jQuery(this).css('-o-user-select', 'none'); 
                        jQuery(this).css('-moz-user-select', 'none'); 
                        jQuery(this).css('-khtml-user-select', 'none'); 
                        jQuery(this).css('-webkit-user-select', 'none'); 
                }); 
        } 
});

这样使用：

if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 ){
 // touch screen detected
 $("#amount, #amount2").disableSelection(); 
}

【讨论】：

我试过在没有任何条件的情况下使用 disableSelection 并且它确实有效。谢谢

【解决方案3】：

它有点笨拙，但我找到了一个可行的解决方案。我刚刚在输入上放置了没有内容的 div，因此它不可选择，但在其他所有方面看起来和行为都像正常输入。谢谢

【讨论】：

【解决方案4】：

另一种方法是不使用文本区域。改用 PHP 的 GD 库来创建看起来像 textarea 的东西。

【讨论】：