通过javascript每次点击动态禁用文本选择？

Posted 2023-03-06

【中文标题】通过javascript每次点击动态禁用文本选择？

【英文标题】：Disable text selection dynamically per click via javascript?

【发布时间】：2012-08-12 03:55:42

【问题描述】：

我有一个表格，我添加了一些多项选择功能，其中 shift + click 在第一次单击和第二次单击之间选择行，但最终突出显示行之间的所有文本。

我不想通过 CSS 禁用文本选择，因为这些东西确实需要可选，而不是当我的多选功能触发时 shift + click 时。

这个可以吗？

    var lastChecked;    
    $("#contact_table tr").click(function(e) 
        if (e.target.getAttribute('type') == 'checkbox') 
            return;
        ;  
        if (e.shiftKey && lastChecked) 
            // select between last point and new point
            var tableRows = $("#contact_table tr");
            var newRow = tableRows.index($(this));
            var oldRow = tableRows.index(lastChecked);
            if (oldRow < newRow) 
                newRow = newRow +1;
            
            var sliceRange = [newRow, oldRow].sort();
            var selectedRows = tableRows.slice(sliceRange[0], sliceRange[1])
                .find('input[type=checkbox]').attr('checked', true);
         else 
            var checkbox = $(this).find('input[type=checkbox]');
            var checked = toggleCheckbox(checkbox);
            if (checked) 
                lastChecked = $(this);
                           
        ;
        recalculateSelectedButton();
    );

【问题讨论】：

可以分享一下你的多选功能吗？我认为您应该能够阻止事件处理程序中的默认行为。

@PJH 刚刚添加了它！谢谢:)

***.com/questions/826782/…

@JoelPurra 是的，我在帖子中引用了该方法。我很好奇是否有一个 JS 事件可以劫持这种行为，而不是临时动态设置 CSS（我什至不确定这是否可行，因为点击已经开始）。

@YujiTomita：你是对的。我误读了！

【参考方案1】：

您可以使用 javascript 取消选择所有文本；在运行多选逻辑后添加对RemoveSelection() 的调用。

来自http://help.dottoro.com/ljigixkc.php 通过Clear a selection in Firefox

function RemoveSelection () 
    if (window.getSelection)   // all browsers, except IE before version 9
        var selection = window.getSelection ();                                        
        selection.removeAllRanges ();
    
    else 
        if (document.selection.createRange)         // Internet Explorer
            var range = document.selection.createRange ();
            document.selection.empty ();
        
    

【讨论】：

乔尔，你找到了！这非常有效，显然甚至在 IE 上也是如此。谢谢！

终于！ Even a blind squirrel finds a nut once in a while =)

非常感谢，嘘！

【参考方案2】：

您可以尝试根据选中复选框的数量禁用用户选择。如果有，只需将 CSS 样式 user-select: none;（和前缀版本）添加到 #contact_table。

如果您提供 jsfiddle 以及您当前的 javascript 代码和表格，我也会测试代码 - 现在它是原样 ;) 我不确定点击交互将如何与任何取消的事件冒泡一起发挥作用等等。此外，即使选中了复选框，此实现也没有考虑到用户可能想要选择文本（因此它可能不是您要查找的内容）。

$(function() 
    var $contactTable = $("#contact_table"),
        userSelectNoneClass = "user-select-none";

    $contactTable.on("change", ":checkbox", function(e) 
        var numberOfCheckedRows = $("#contact_table :checkbox:checked").length,
            anyCheckedRows = (numberOfCheckedRows > 0);

        if (anyCheckedRows && $contactTable.hasClass(userSelectNoneClass)) 
            $contactTable.addClass(userSelectNoneClass);
         else 
            $contactTable.removeClass(userSelectNoneClass);
        
    );
);

.user-select-none

    /* From https://***.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

编辑：改用更改事件。

【讨论】：

乔尔，感谢您的宝贵时间。谢谢！这是一个好主意，但最好不要采取阻止选择的方式，除非在多次单击期间。我认为如果只选择未选中的框，用户会感到困惑，因为人们一开始很少意识到文本选择。 “为什么这该死的东西不起作用？？”

@YujiTomita：是的，想到了在我实现了代码;)