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

Disable text selection dynamically per click via javascript?

本文关键字：动态 文本 选择 javascript 通过      更新时间：2023-09-26

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

我不想通过 CSS 禁用文本选择，因为这些东西确实需要可选，只是当我的多选函数触发时 shift + 单击时不是。

这能做到吗？

    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();
    });

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

从 http://help.dottoro.com/ljigixkc.php 到清除火狐中的选择

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 ();
        }
    }
}

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

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

$(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://stackoverflow.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;
}

编辑：改用更改事件。

相关文章：