我使用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();
答案 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;
}
答案 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的东西。