9

所以我知道这听起来像是重复的，但事实并非如此（或者，如果是，我能找到的所有答案都不能按照我需要的方式工作）。问题是这样的：

我正在使用 jQuery 在 HTML5 中编写，我需要制作一个网格，允许通过控制和移位进行多选。我有这个逻辑，但只要你按住 shift 单击它就会选择网格中的文本。我想阻止这种选择，但这是这个问题与我发现的其他问题之间的关键区别：我希望选择文本在所有其他时间都有效。

重申：我想使用 shift禁用文本选择，而不禁用指定元素的所有文本选择。有谁知道我该怎么做？

-- 编辑 --
以下（在网格的构造函数中）为我解决了这个问题。正如回答者建议的那样，我声明了一个不可选择的类。

this.gridBody = $("#userGrid");
var handleKeydown = function(e)
{
  e = e || window.event;
  var keyPressed = e.keyCode || e.which;
  if (keyPressed == keys.shift) {
    e.data.gridBody.addClass("unselectable");
  }
};
var handleKeyup = function(e)
{
  e = e || window.event;
  var keyPressed = e.keyCode || e.which;
  if (keyPressed == keys.shift) {
    e.data.gridBody.removeClass("unselectable");
  }
};

$(document).on('keydown', this, handleKeydown);
$(document).on('keyup', this, handleKeyup);
4

2 回答 2

7

这将在文档上绑定一个事件，在该事件中它会在按下 DOWN Shift 时禁用文本选择

 document.onkeydown = function(e) {
  var keyPressed = e.keyCode;
  if (keyPressed == 16) { //thats the keycode for shift

    $('html').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'
    }); //or you could pass these css rules into a class and add that class to html instead

    document.onkeyup = function() {
      //here you remove css rules that disable text selection
    }
  }
}

希望我对你有所帮助。

根据评论

document.onkeydown = function(e) {
  var keyPressed = e.keyCode;
  if (keyPressed == 16) { //thats the keycode for shift

    $('html').addClass('unselectable'); //unselectable contains aforementioned css rules

    document.onkeyup = function() {
       $('html').removeClass('unselectable'); //and simply remove unselectable class making text selection availabe
    }
  }
}
于 2013-09-05T20:45:00.010 回答
3

您可能会考虑的另一种解决方案：您可以只清除文本选择，而不是通过监视 shift 键和切换可选择性来阻止文本选择。

window.getSelection().removeAllRanges();

我发现这更方便，因为它可以在您的点击处理程序中运行以“取消”默认行为。似乎适用于 IE 9+ 和其他现代浏览器。

于 2015-01-08T04:26:44.893 回答