2

我使用 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();
4

4 回答 4

2

似乎 CSS user-selectCSS 方法确实有效（至少在 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 小提琴演示。

于 2012-05-28T14:51:05.610 回答
0

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

于 2012-05-28T15:03:57.937 回答
0

编辑：您可以像这样创建自己的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(); 
}
于 2012-05-28T14:03:02.257 回答
0

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

于 2012-05-28T15:01:00.267 回答