Question

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

Answer 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

Answer 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(); 
}

Answer 3

它有点笨拙但我发现了一个有效的解决方案。我刚刚在输入中没有内容的div，因此它不可选择但看起来和行为像其他方式的正常输入。谢谢

Answer 4

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

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

4 个答案: