如何使用jQuery禁用文本选择?

28 浏览
0 Comments

如何使用jQuery禁用文本选择?

jQuery或jQuery-UI有没有禁用给定文档元素的文本选择功能?

0
0 Comments

在这个问题中,原因是作者希望禁用文本选择功能,即禁止用户选中页面中的文字。解决方法是使用jQuery来实现。

作者在提问中提到了一个非常有用的答案,链接指向了一个解决方案,可以在jQuery中使用CSS来禁用文本选择功能。作者还建议可以结合另一种方法来兼容IE浏览器。

具体的解决方法是通过CSS设置元素的user-select属性为none,代码如下:

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

作者还提到,Chrome浏览器使用-webkit-user-select来实现禁用文本选择功能。作者总结道,在处理这类问题时,他更倾向于使用CSS而不是jQuery或JS,因为浏览器内置的方法通常是最好和最高效的。

通过以上整理,可以得出以下文章:

如何使用jQuery禁用文本选择功能?

在处理网页中的一些交互问题时,有时我们希望禁用用户选择页面中的文字,即禁止用户选中文字。下面是一种使用jQuery实现禁用文本选择功能的方法。

首先,我们找到了一个非常有用的回答,链接指向了一个解决方案,可以通过CSS来禁用文本选择功能。具体的方法是通过设置元素的user-select属性为none来实现。下面是代码示例:

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

需要注意的是,不同浏览器使用的前缀不同。在Chrome浏览器中,需要使用-webkit-user-select来禁用文本选择功能。

总结起来,作者更倾向于使用CSS来解决这类问题,因为浏览器内置的方法通常是最好和最高效的。

通过以上方法,我们可以很方便地使用jQuery来禁用文本选择功能,提升用户体验。

0
0 Comments

如何使用jQuery禁用文本选择?

如果你使用jQuery UI,有一个方法可以实现这个目的,但它只能处理鼠标选择(即CTRL+A仍然有效):

$('.your-element').disableSelection(); // 在jQuery UI 1.9中已过时

如果你不想使用jQuery UI,代码非常简单:

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

jQuery UI的方法很好,但它没有提供同样级别的保护,它确实阻止直接选择东西,但如果你从另一个DOM对象中选择内容,你仍然需要CSS规则。下面是这个函数:

function () {
    return this.bind(($.support.selectstart ? "selectstart" : "mousedown") + ".ui-disableSelection", function(event) {
        event.preventDefault();
    });
}

注意,disableSelection()在jQuery UI 1.9中已经过时。

它可能还需要在某些浏览器中添加`.on('mousedown', false)`才能工作。然而,默认情况下禁用mousedown事件可能会破坏现有的功能,这是危险的。

烦人的是它已经过时了。有很多时候你确实需要它。

我正在为一些锚文本创建右键上下文菜单,我不希望文本在点击时被选择。所以,是的,这将被视为一个合理的例子。

在jQuery的`.css()`中是否仍然需要包含供应商前缀?

0
0 Comments

在jQuery 1.8中,可以通过以下方式禁用文本选择:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

JavaScript的替代方法仅适用于IE。其他浏览器不支持"onselectstart"。

他们仍然可以通过菜单或键盘组合键进行全选,并在Chrome、Safari和Firefox(据我所知)中选择文本。你知道有什么解决方法吗?我确定我可以获取按键事件并在按下CTRL-C或CTRL-A时返回false,但如果他们使用浏览器菜单选择文本,则无济于事。目前,我对解决这个问题的唯一想法是将文本嵌入Flash对象中。

别这样做。blog.slaks.net/2010/12/on-copy-prevention-in-html-part-2.html blog.slaks.net/2010/12/on-copy-prevention-in-html-part-3.html

好的!谢谢你的启发。根据inflate方法,我可以轻松编写一个方案来阻止非程序员复制文本。你提供的其他解决方案对我的问题来说有些过于复杂了。

谢谢你。我正在开发一个拖动滑块,需要一种不会在过程中选中文本的方法。

谢谢。我很惊讶jQuery UI按钮没有实现这个功能。我不小心选择了文本,而不是点击按钮,发生了几次。

jQuery UI按钮没有实现这个功能,特别是在按钮集上,这让人失望。

那你要如何重新启用?

将每个设置反转即可。

这个回答应该包括.css('MozUserSelect','none'),以覆盖Firefox。

错误;jQuery会自动处理这个问题。请参考编辑历史记录。

正确,我应该说,jQuery旧版本需要.css('MozUserSelect', 'none')才能在Firefox中起作用。

对于那些对于禁用文本选择(或其他任何问题)说“别这样做”的人,稍微开放一点思维。往往人们禁用它是出于美观的原因,比如避免在双击带有文本的标签时选择文本等。所以要么回答问题,要么提供一个实际的反驳观点,并指明你要否定的是什么,不要一概而论地否定这个想法。

这个答案正是jQuery UI Core库提供的API disableSelection的实现方式。然而,这个功能只在短暂的时间内存在。自从v1.9开始,jQuery UI Core库已经将其移除(它是在v1.6中添加的)。

对不起,但我该如何选择我的特定元素?我想选择这个:#idname

这将创建一个新的"disableSelection"方法,你可以使用它。所以你可以像这样调用它:$("#idname").disableSelection();

在动态添加和显示模态窗口之前,我使用了禁用body选择的方法。关闭窗口后,应该使用什么代码来恢复可选择性?

只需删除/解绑每个设置即可。

0