如何在不禁用所有文本选择的情况下使用shift禁用文本选择?

时间:2013-09-05 20:21:25

标签: javascript jquery html5 css3 shift

所以我知道这听起来像是重复的,但它不是(或者如果它是,我能找到的所有可接受的答案都不能按我需要的方式工作)。问题是:

我正在使用jQuery编写HTML5,我需要创建一个网格,允许多项控制和移位。我有这个逻辑工作,但每当你按住Shift键点击它选择网格中的文字。我想阻止这种选择,但是这里和我发现的其他问题之间的关键区别是:我希望在其他所有时间选择文本。

重申:我想使用shift WITHOUT 禁用所有指定元素的文本选择来禁用文本选择。有谁知道我怎么能这样做?

- 编辑 -
以下(在网格的构造函数中)为我解决了这个问题。正如回答者所说,我宣布了一个不可选择的课程。

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

2 个答案:

答案 0 :(得分: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
    }
  }
}

答案 1 :(得分:2)

您可以考虑的另一种解决方案:您可以通过查看Shift键和切换可选择性来阻止文本选择,而只需清除文本选择。

window.getSelection().removeAllRanges();

我发现这更方便,因为它可以在您的点击处理程序中运行以“取消”默认行为。 Appears to work in IE 9+ and other modern browsers.