防止文本表高亮显示
我有一张桌子,我允许用户'选择'多行。 这一切都使用jQuery事件和一些CSS来处理,以直观地指示该行是“被选中”的。 当用户按下shift键时,可以选择多行。 有时这会导致文字突出显示。 无论如何要防止这一点?
有一个CSS3属性。
#yourTable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
如果你想在你的用户可以选择或不选择你的网站时控制,你可以使用这个小小的jQuery插件。
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');
});
}
});
并将其用作:
// disable selection on #theDiv object
$('#theDiv').disableSelection();
否则,你可以在你的css文件中使用这些css属性:
#theDiv
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
关于上面Cleiton的答案 - 代码示例似乎运行良好,但为了成为jQuery世界中的好公民,您应该在函数结尾处返回jQuery对象,以便它可以链接 - 一个简单的单行补充修正了:
jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
return this;
}
});
干杯,希望这是有帮助的。
链接地址: http://www.djcxy.com/p/41407.html