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

11 浏览
0 Comments

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

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

我不想通过CSS禁用文本选择，因为这些内容确实需要可以选择，只是在按下shift +点击时不需要选择，因为这时会触发我的多选功能。

这可以做到吗？

var lastChecked;

$("#contact_table tr").click(function(e) {

if (e.target.getAttribute('type') == 'checkbox') {

return;

};

if (e.shiftKey && lastChecked) {

// 选择最后一个点和新点之间的行

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

});

0

2 答案

0 Comments

问题：如何通过JavaScript动态禁用点击事件后的文本选择？

原因：希望在一次点击事件中禁用文本选择，但同时也希望当复选框未选中时，用户仍然能够选择文本。希望通过动态添加CSS样式来实现这个效果。

解决方法：首先，通过在表格的父元素上添加一个类名"user-select-none"来定义CSS样式，具体样式如下所示：

.user-select-none {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

然后，通过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"类名，从而禁用文本选择；当所有复选框都未选中时，会移除"user-select-none"类名，从而恢复文本选择功能。

注意：该实现没有考虑到即使存在选中的复选框，用户可能仍然希望选择文本的情况。因此，如果用户希望在存在选中复选框的情况下仍然能够选择文本，这个解决方法可能不适用。

0
0 Comments

问题的出现原因：需要通过JavaScript在点击事件中动态禁用文本选择。

解决方法：使用以下JavaScript代码来禁用文本选择：

function RemoveSelection () {
    if (window.getSelection) {  // 所有浏览器，除了 IE 版本 9 之前的
        var selection = window.getSelection ();                                        
        selection.removeAllRanges ();
    }
    else {
        if (document.selection.createRange) {        // Internet Explorer
            var range = document.selection.createRange ();
            document.selection.empty ();
        }
    }
}

在运行多选逻辑之后，添加一个调用RemoveSelection()的语句即可取消选择。

这段代码可在大多数浏览器中使用，包括IE。感谢Joel的发现和分享，真是绝妙！即使是IE，也可以正常工作。最后，感谢booya的帮助！

0