jquery 禁用文本选择，同时按'shift'

vtwuwzda 于 2023-08-04 发布在 jQuery

关注(0)|答案(6)|浏览(116)

我在JavaScript中实现了项目选择功能（使用jQuery）。item是一个包含一些html的li。
用户可以点击一个项目（使其被选择），然后按住Shift键点击另一个项目以选择其间的所有项目。这基本上可以正常工作，但是shift单击也会选择（higtlights）出现在项目中的文本（shift单击的基本浏览器功能）。有什么办法能让它失效吗？

jquery

来源：https://stackoverflow.com/questions/1527751/disable-text-selection-while-pressing-shift

6条答案

按热度按时间

li9yvcax1#

在Shift +单击后尝试此操作...

document.getSelection().removeAllRanges();

字符串
如果这还不够有效，您可能还必须取消onselectstart事件...

window.onload = function() {
  document.onselectstart = function() {
    return false;
  }
}

型

赞(0）回复(0）举报 2023-08-04

7fyelxc52#

尝试使用JavaScript和css的组合来阻止选择：

$('li').attr('unselectable', 'on'); // IE

字符串
css（适用于非IE浏览器）：

li {
            user-select: none; /* CSS3 (little to no support) */
        -ms-user-select: none; /* IE 10+ */
       -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}

型

赞(0）回复(0）举报 2023-08-04

yduiuuwa3#

我有一个这样的应用程序。技巧是，我想允许选择，但我也想Ctrl单击和Shift单击选择项目。
我发现除了IE之外的所有人都允许你通过取消mousedown事件来解决这个问题，而在IE中，最有效的方法是暂时禁用onselectstart：

$("#id").mousedown(function (e) {
    if (e.ctrlKey || e.shiftKey) {
        // For non-IE browsers
        e.preventDefault();

        // For IE
        if ($.support.msie) {
            this.onselectstart = function () { return false; };
            var me = this;  // capture in a closure
            window.setTimeout(function () { me.onselectstart = null; }, 0);
        }
    }
});

字符串

赞(0）回复(0）举报 2023-08-04

6qqygrtg4#

这段代码将停止文本选择只有在“shift”键按下，如果你释放它，那么你可以选择文本像往常一样。我现在用的是ES6代码。

["keyup","keydown"].forEach((event) => {
    window.addEventListener(event, (e) => {
        document.onselectstart = function() {
            return !(e.key == "Shift" && e.shiftKey);
        }
    });
});

字符串

赞(0）回复(0）举报 2023-08-04

zour9fqk5#

如果您的表格行（项目）中有复选框，则只需在进行选择后将焦点设置到该行的复选框。关注复选框应该可以摆脱浏览器选择。您还可以关注文本框或其他表单元素。对于jQuery，

$('tr').bind('click', function(e) {
  // If shift key was down when the row was clicked
  if (e.shiftKey) { 
    // Make the row selected
    $(this).parent().children().slice($(last).index(), $(this).index()+1).addClass('selected').find('input:checkbox').attr('checked', true);

    // Now focus on the checkbox within the row
    $('input:checkbox', $(this)).focus();
  }
});

字符串

赞(0）回复(0）举报 2023-08-04

disho6za6#

我在body中添加了一个类，如果按下shift键，则可以防止默认的mousedown事件。

<body class="noselection">
    <script>
    $(document).ready(function() {
        $(".noselection").mousedown(function (e) {
        if (e.shiftKey) {
            
            e.preventDefault();
    
        }
    });
    });
</script>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 禁用文本选择，同时按'shift'

6条答案

相关问题

热门标签

最新问答