jquery - 使用输入框防止文本选择突出显示

Question

我目前正在开发一个网页作为一个业余爱好元素，其中包含一些使用 jquery 和 css3 的简洁动画，这些动画响应用户在页面上拖动鼠标的方式。这是我如何处理它的摘要，因此您可以了解我的真正问题。

我在页面底部有一个用作传感器的 div。如果我点击这个元素并用鼠标拖动，一些动画(主要是一些带有过渡的播放)将在主页上播放。

<div class="someclass"></div>

查询

$someclass = $('.someclass');

$someclass.mouseenter(function() {


//do something
 $someclass.mousedown(function(ed) {
   //several things with ed.pageX, ed.pageY coordinates

  $someclass.mousemove(function(em){
      //plenty of things with em.pageX, em.pageY coordinates
});

 }).mouseup(function() {
$someclass.unbind('mousdown');
});

 }).mouseleave(function(){

       $someclass.unbind('mouseenter');

});

一切正常，只是因为这是点击和拖动密集型操作，一些文本元素会突出显示。我在网上四处寻找解决方案，但按照其他答案中的建议对 mousedown 使用 preventDefault() 对我不起作用。它无法对 mousedown() 事件执行任何操作，所以我不希望这样。

在 CSS 上使用::selection 并将背景设置为透明也没有给我所需的结果。文本仍然突出显示。

我试着禁用一些人建议的 css 上的用户选择，那又是我生命中浪费的一天。

所以我想到了一个hack。我没有使用 div，而是使用了输入字段。

我知道当你点击文本字段并拖到它外面时，它不会选择页面上的任何其他文本。(它把吸盘锁定在框中，是的!)所有事件，如 mousedown、mousemove 和显然，所有的工作都很好。所以我继续进行修改，一切正常!

但是有一个问题。当我点击这个输入字段并拖动时，它只关注第一次点击。我必须再次单击并拖动它才能使动画起作用。我试过$someclass.focus() 在文档准备就绪时它也得到聚焦但是直到并且除非我实际点击输入字段，它拒绝检测我的 mousemove()。

我在 $someclass.mouseenter() 上触发了 $someclass.mousedown()。现在，如果我在此元素上再次输入 leave 和 enter ，我可以单击并拖动所有动画。所以这种情况下不需要点击文本字段两次。

我尝试触发 mouseenter、mouseleave 等。无需我的鼠标帮助，多个组合就可以让这个愚蠢的文本聚焦。

但我希望它能正常工作。我猜我必须使用 mouseenter()，但我已经筋疲力尽了。我四处搜索，看看是否有人在使用这种方法，但是没有，甚至没有接近我正在寻找的东西。

在此先感谢您的帮助。

干杯!

Answer 1

你必须像这样将你的背景设置为无:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

现在它应该可以工作了。

更好的方法是:

.[your div class] {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.[your div class] input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }