Preventing text selection highlighting using an input box

Question

I am currently working on a webpage as a hobby project with some neat animations using jquery and css3 that responds to the how the user drags his mouse on the page. Here is a summary of how I worked on it so you can get my real problem.

I have a div at the bottom of the page which acts as a sensor. If I click on this element and drag with the mouse , some animations (mainly some play with transitions ) will play on the main page.

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

Jquery

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

});

Everything works fine except that since this is click and drag intensive, some of the text elements get highlighted. I looked around for solutions on the net but using preventDefault() for mousedown as suggested in other answers doesn't work for me. It fails to do anything with the mousedown() event so I didn't want that.

Using ::selection on the CSS and setting the background to Transparent does not give me the required result either. The text still stays highlighted.

I played around with disabling the user-select on css that some suggested and that was another day wasted in my life.

So I thought of a hack. Instead of using a div I used an input field.

I know that when you click on the text field and drag outside of it , it will not select any other text on the page.(It locks the sucker in the box so yeah!) All the events like mousedown, mousemove and all work as well, obviously. So I went ahead and made the modifications and everything works well!

But there is one issue. When I click on this input field and drag , it only focuses it on the first click. I have to click and drag on it again for the animations to work. I tried $someclass.focus() at document ready and it gets focused as well but until and unless I physically click on the input field , it refuses to detect my mousemove().

I triggered $someclass.mousedown() on $someclass.mouseenter(). Now, its that if I enter leave and enter again on this element , I can click and drag and all the animations work. So this case there is no need for clicking on the text field twice.

I tried triggering mouseenter, mouseleave e.t.c. multiple combinations of this to just get this stupid text to focus without my mouse's help.

But I want this to work properly. I'm guessing i have to work with mouseenter() but I just burned out trying. I searched around to see if anyone is using this method but nay, nothing even close to what I'm looking for.

Thanks in advance for your help.

Cheers!

Answer 1

You have to set your background to none like so:

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

now it should work.

a better way to do this is:

.[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; 
 }