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

时间:2012-05-28 13:32:07

标签: jquery jquery-ui mobile input touchscreen

我使用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 个答案:

答案 0 :(得分:2)

似乎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

答案 1 :(得分: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(); 
}

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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