正文

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

 2023-03-06  35

关键词：

【中文标题】如何使用 jQuery 禁用文本选择？【英文标题】：How to disable text selection using jQuery? 【发布时间】：2011-02-11 14:26:48 【问题描述】：

jQuery 或 jQuery-UI 是否有任何功能可以禁用给定文档元素的文本选择？

【问题讨论】：

可能重复：***.com/questions/1319126/prevent-highlight-of-text @John：上面的链接能回答你的问题吗？如果没有，您可能需要更详细地说明您的情况有何不同。是的。但是，虽然答案是一样的，但这个问题非常具体，所以很多人在考虑更一般的问题时会错过这个答案（就像我一样）。 @Jhon：另一个问题也有jQuery解决方案。 【参考方案1】：

在 jQuery 1.8 中，可以按如下方式完成：

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

【讨论】：

JavaScript 替代方案仅适用于 IE。 “onselectstart”不适用于其他浏览器 @Omar：我很清楚这一点。 @Bryce：别这样。 blog.slaks.net/2010/12/on-copy-prevention-in-html-part-2.htmlblog.slaks.net/2010/12/on-copy-prevention-in-html-part-3.html 谢谢。我正在研究一个拖动滑块，需要一种在此过程中不会选择文本的方法。对于那些说“只是不要”禁用文本选择（或其他任何关于此问题的内容）的人，请稍微敞开心扉。很多时候人们出于审美原因禁用它，例如避免在双击带有文本的标签时选择文本等。所以要么回答这个问题，要么提供一个实际的反驳点并指定你在说什么否定，不要不要只是笼统地勾勒出这个想法。【参考方案2】：

我发现这个答案 (Prevent Highlight of Text Table) 最有帮助，也许它可以与提供 IE 兼容性的另一种方式结合使用。

#yourTable

  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;

【讨论】：

Chrome 使用 -webkit-user-select 总是欣赏 CSS 做事的方式，而不是一般使用 jQuery 或 JS。就像 jQuery 动画 vs CSS 过渡一样，内置到浏览器中的方式总是最好和最有效的。【参考方案3】：

如果你使用 jQuery UI，有一个方法可以解决这个问题，但它只能处理鼠标选择（即 CTRL+A 仍然有效）：

$('.your-element').disableSelection(); // deprecated in 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 = function () return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) + ".ui-disableSelection", function( event ) event.preventDefault( ); ); 请注意，在 jQuery UI 1.9 中不推荐使用 disableSelection() 它可能还需要 .on('mousedown', false) 才能工作，具体取决于您的浏览器。但是，默认情况下杀死 mousedown 事件是很危险的，因为这可能会破坏现有功能精氨酸。被贬值了，很烦。你有足够的时间合法地想要这个。我正在一些锚文本上创建一个右键单击上下文菜单，并且我不希望在单击时选择文本。所以是的，@Monk，这可以作为一个合法的例子。【参考方案4】：

这里有一个比较全面的断开选择的解决方案，取消部分热键（如Ctrl+a和Ctrl+c.Test: Cmd+a 和 Cmd+c)

(function($)

  $.fn.ctrlCmd = function(key) 

    var allowDefault = true;

    if (!$.isArray(key)) 
       key = [key];
    

    return this.keydown(function(e) 
        for (var i = 0, l = key.length; i < l; i++) 
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) 
                allowDefault = false;
            
        ;
        return allowDefault;
    );
;


$.fn.disableSelection = function() 

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css('-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none')
               .bind('selectstart', false);
;

)(jQuery);

并调用示例：

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

这对于旧版本的 FireFox 也可能不够（我不知道是哪个）。如果这一切都不起作用，请添加以下内容：

.on('mousedown', false)

【讨论】：

为什么要给attr('unselectable', 'on')打两次电话？是错字还是有用？这对我很有用，但我不得不禁用 ".each(function() $(this).attr('unselectable','on') .bind('selectstart',函数（）返回假；）；）；“我的特定网络应用程序（JQuery Mobile）的部分，以防万一它可以帮助任何人..【参考方案5】：

这可以使用 JavaScript 轻松完成，适用于所有浏览器

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target)
if (typeof target.onselectstart!="undefined") //For IE 
    target.onselectstart=function()return false
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function()return false
target.style.cursor = "default"

 </script>

调用此函数

<script type="text/javascript">
   disableSelection(document.body)
</script>

【讨论】：

这个太棒了！但是我们如何停止对它的“关注”呢？这个答案在 2013 年已经过时了【参考方案6】：

CHROME 的 1 行解决方案：

body.style.webkitUserSelect = "none";

和FF：

body.style.MozUserSelect = "none";

IE 需要设置“不可选择”属性（详情在底部）。

我在 Chrome 中对此进行了测试，它可以正常工作。此属性是继承的，因此在 body 元素上设置它会禁用整个文档中的选择。

详情请看：http://help.dottoro.com/ljrlukea.php

如果您使用 Closure，只需调用此函数：

goog.style.setUnselectable(myElement, true);

它透明地处理所有浏览器。

非IE浏览器是这样处理的：

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

在这里定义： http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

IE 部分的处理方式如下：

if (goog.userAgent.IE || goog.userAgent.OPERA) 
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) 
  for (var i = 0, descendant; descendant = descendants[i]; i++) 
    descendant.setAttribute('unselectable', value);

【讨论】：

【参考方案7】：

        $(document).ready(function()
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        );

【讨论】：

除了代码之外，能不能把答案简单总结一下？【参考方案8】：

我认为这段代码适用于所有浏览器并且需要最少的开销。它实际上是上述所有答案的混合体。如果您发现错误，请告诉我！

添加 CSS：

.no_select  user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;

添加 jQuery：

(function($)
    $.fn.disableSelection = function() 
           
        $(this).addClass('no_select');              
        if($.browser.msie)
        
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        
    return this;            
;
)(jQuery);

可选：要同时禁用所有子元素的选择，您可以将 IE 块更改为：

$(this).each(function() 
    $(this).attr('unselectable','on')
    .bind('selectstart',function() return false; );
);

用法：

$('.someclasshere').disableSelection();

【讨论】：

【参考方案9】：

以下内容将禁用所有常见浏览器（IE、Chrome、Mozilla、Opera 和 Safari）中所有类“项目”的选择：

$(".item")
        .attr('unselectable', 'on')
        .css(
            'user-select': 'none',
            'MozUserSelect': 'none'
        )
        .on('selectstart', false)
        .on('mousedown', false);

【讨论】：

并不复杂 - 非常棒！谢谢你。适合残疾人看；我添加了 .attr('disabled', 'disabled') 更新：我用 .attr('readonly', 'readonly') 代替了 .attr('disabled', 'disabled')。禁用会阻止在 MVC 中发布我的模型变量（模型变量为空）。 Readonly 仍然禁用查找（我使用引导程序），它允许发布项目值优秀的兄弟，我使用此代码替换“指针事件：无；”，这在 IE 11 中不起作用。问候【参考方案10】：

这其实很简单。要禁用文本选择（以及单击+拖动文本（例如 Chrome 中的链接）），只需使用以下 jQuery 代码：

$('body, html').mousedown(function(event) 
    event.preventDefault();
);

所有这一切都是为了防止在您用鼠标 (mousedown()) 在 body 和 html 标记中单击时发生默认设置。您只需更改两个引号之间的文本即可非常轻松地更改元素（例如，将 $('body, html') 更改为 $('#myUnselectableDiv') 以使 myUnselectableDiv div 不可选择。

向您展示/证明这一点的快速 sn-p：

$('#no-select').mousedown(function(event) 
  event.preventDefault();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

请注意，这种效果并不完美，在使整个窗口不可选的同时表现最佳。您可能还想添加

取消部分热键（如Ctrl+a和Ctrl+c。Test:Cmd+a和Cmd+c)

同样，通过使用上述弗拉基米尔答案的那一部分。（去他的帖子here）

【讨论】：

【参考方案11】：

我找到的最好和最简单的方法，防止 ctrl + c，右键单击。在这种情况下，我阻止了所有内容，因此我不必指定任何内容。

$(document).bind("contextmenu cut copy",function(e)
    e.preventDefault();
    //alert('Copying is not allowed');
);

【讨论】：

【参考方案12】：

在适当的情况下，对此的一种解决方案是使用<button> 来表示您不想选择的文本。如果您绑定到某个文本块上的 click 事件，并且不希望该文本是可选的，将其更改为按钮将改善语义并防止文本被选中。

<button>Text Here</button>

【讨论】：

【参考方案13】：

我已经尝试了所有方法，这对我来说是最简单的，因为我使用的是 IWebBrowser2 并且没有 10 个浏览器可以应对：

document.onselectstart = new Function('return false;');

非常适合我！

【讨论】：

JQuery Mobile：单击文本字段时如何禁用默认键盘？

】JQueryMobile：单击文本字段时如何禁用默认键盘？【英文标题】：JQueryMobile:howtodisabledefaultkeyboardwhenclickingintextfield?【发布时间】：2012-10-0513:22:41【问题描述】：我目前正在使用输入文本字段，当单击它们时会生成一个选择器（... 查看详情

如何使用 JavaScript 暂时禁用文本选择？

】如何使用JavaScript暂时禁用文本选择？【英文标题】：HowcanIdisableTextSelectiontemporarilyusingJavaScript?【发布时间】：2010-10-2720:31:11【问题描述】：这是一个有点具体的问题，所以我会直奔主题。我正在为Web应用程序的一部分开发一... 查看详情

如何使用 jQuery 禁用/启用选择字段？

】如何使用jQuery禁用/启用选择字段？【英文标题】：Howtodisable/enableselectfieldusingjQuery?【发布时间】：2012-05-2103:42:45【问题描述】：我想以类似的形式创建一个选项[]Iwouldliketoordera[selectboxwithpizza]pizza选择框仅在选中复选框时启用... 查看详情

如何使用 AngularJS 根据下拉选择值禁用输入文本框？

】如何使用AngularJS根据下拉选择值禁用输入文本框？【英文标题】：HowcanidisableaninputtextboxbasedondropdownselectionvalueusingAngularJS?【发布时间】：2020-03-2919:51:54【问题描述】：我在AngularJS的JavaScript中有以下内容$("#listOptionFruit").kendoDropD... 查看详情

如何使用 jquery 在选择框中启用/禁用选项

】如何使用jquery在选择框中启用/禁用选项【英文标题】：HowdoIenable/disableoptionsinSelectBoxusingjquery【发布时间】：2012-06-1219:01:52【问题描述】：我有一个选择框，其中包含使用php动态生成的选项和optgroup。现在，当我选择“全部”... 查看详情

如何使用 javascript/jquery 在选择下拉菜单中启用/禁用引导选项

】如何使用javascript/jquery在选择下拉菜单中启用/禁用引导选项【英文标题】：Howtoenable/disablebootstrapoptioninselectdropdownusingjavascript/jquery【发布时间】：2020-08-3008:30:46【问题描述】：我正在尝试禁用特定选项。这是我的代码<selectid... 查看详情

如何禁用 TextArea (JavaFX) 中的文本选择？

】如何禁用TextArea(JavaFX)中的文本选择？【英文标题】：HowtodisabletextselectioninTextArea(JavaFX)?【发布时间】：2020-08-2304:36:57【问题描述】：我想禁用用户在JavaFX的textArea中选择文本的功能。如何做到这一点？【问题讨论】：【参考方... 查看详情

如何禁用提交按钮，直到所有文本字段都已满并选择文件

】如何禁用提交按钮，直到所有文本字段都已满并选择文件【英文标题】：Howtodisablesubmitbuttonuntilalltextfieldsarefullandfileisselected【发布时间】：2016-03-0314:19:09【问题描述】：我是javascript/jquery的新手，所以我可能遗漏了一些明显的... 查看详情

Rails 4：如何在 Rails 中使用 JQuery 禁用基于复选框值的文本字段

】Rails4：如何在Rails中使用JQuery禁用基于复选框值的文本字段【英文标题】：Rails4:HowtoDisableTextFieldBasedonCheckboxValueUsingJQueryinRails【发布时间】：2016-03-1700:39:27【问题描述】：我在表单中有一个复选框和一个文本字段。如果复选框... 查看详情

如何在 WebView [React-Native] 中禁用用户文本选择

】如何在WebView[React-Native]中禁用用户文本选择【英文标题】：HowtodisableusertextselectioninWebView[React-Native]【发布时间】：2017-04-1219:30:33【问题描述】：我试图弄清楚如何在我的ios应用程序的React-NativeWebView中禁用文本选择。在网站上... 查看详情

如何禁用 ctrl+click 在 IE 10 中选择文本？

】如何禁用ctrl+click在IE10中选择文本？【英文标题】：Howtodisablectrl+clicktoselecttextinIE10?【发布时间】：2012-09-0915:02:52【问题描述】：在IE10中，当您在按住CTRL键的同时单击任何文本时，浏览器会选择文本（这意味着文本获得焦点，... 查看详情

如何使用 jQuery 选择文本节点？

】如何使用jQuery选择文本节点？【英文标题】：HowdoIselecttextnodeswithjQuery?【发布时间】：2010-09-2220:40:33【问题描述】：我想获取一个元素的所有后代文本节点，作为一个jQuery集合。最好的方法是什么？【问题讨论】：【参考方案1... 查看详情

如何在jquery中启用和禁用文本框[重复]

】如何在jquery中启用和禁用文本框[重复]【英文标题】：Howtomaketextboxenableanddisableinjquery[duplicate]【发布时间】：2014-01-0615:17:32【问题描述】：我写了一个html和脚本的示例代码如下：当我首先执行此代码时，我会收到该警报hello，... 查看详情

如何使用jquery禁用列表框中的多项选择？还是javascript？

...按钮在页面上从列表框中删除一项。任何人都可以帮助我如何停用或禁用列表查看详情

如何在 swift 中为一个文本字段禁用 DatePicker 交互（用于选择日期）“

】如何在swift中为一个文本字段禁用DatePicker交互（用于选择日期）“【英文标题】：HowtodisableDatePickerinteraction(forselectingdate)foronetextfieldinswift"【发布时间】：2021-10-2205:37:18【问题描述】：我在fromDateTf和toDateTf文本字段中使用da... 查看详情

如何使用 jQuery 选择带有文本的按钮

】如何使用jQuery选择带有文本的按钮【英文标题】：HowtoselectbuttonwithtextusingjQuery【发布时间】：2016-09-0211:56:09【问题描述】：是否可以使用jQuery中的text属性来选择按钮？我想：$.each(data,function(index,element)if(element.table_aval==0)varelmt=... 查看详情

如何使用 jquery 选择某些文本节点？

】如何使用jquery选择某些文本节点？【英文标题】：Howtoselectcertaintextnodesusingjquery?【发布时间】：2015-07-1704:01:05【问题描述】：我正在尝试使用ajax从网站获取一些数据。这是我使用ajaxPOST方法的代码：$(data).find(\'.col-md-9.panel:lt(5)... 查看详情

如何使用 jQuery 选择具有特定文本的中间节点：包含选择器？

】如何使用jQuery选择具有特定文本的中间节点：包含选择器？【英文标题】：HowtoselectmiddlenodeswithspecifictextusingjQuery:containsselector?【发布时间】：2021-02-2300:13:05【问题描述】：我想获取包含特定文本的html元素，我使用了:contains选... 查看详情