CODEWITHSUNDEEP
javascripthtmljquerycssmouse-cursor
mkotwd
mkotwd

Reputation: 233

Detect mouse cursor type

I want JavaScript code to detect the mouse cursor type.

For example when the cursor hovers in <textarea> it changes from default to text.

How would I go about detecting this?

Upvotes: 14

Views: 15488

Answers (5)

Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Reputation: 18806

As suggested here, using getComputedStyle worked for me.

const onMouseOver = function (e) {
      var cursor = getComputedStyle(e.target).cursor;
      console.log({ cursor });
    };
document.addEventListener("mouseover", onMouseOver, false);

Although this does not help detect the exact cursor type when cursor is set to auto, we can at least use it when cursor is set to something other than auto.

Upvotes: 1

Chitrank Dixit
Chitrank Dixit

Reputation: 4051

You can detect the cursor type using JavaScript

like

<input id="sample_text" name="one" type="text" value="Sample Text" />

and the JavaScript code should look something like this

$('input[id=sample_text]').click( function() {
   alert("test");   
   var ctl = document.getElementById('sample_text');
   var startPos = ctl.selectionStart;
   var endPos = ctl.selectionEnd;
   alert(startPos + ", " + endPos);
});

you can also look at this Jsfiddle for Js Cursor Detection

the above is the Jquery code written , you can also use the Vanilla JS for that you just need to change it to 

<input id="sample_text" name="one" type="text" value="Sample Text" onclick="detect_cursor()" />

and the JavaScript should look something like this

function detect_cursor() {
   alert("test");   
   var ctl = document.getElementById('sample_text');
   var startPos = ctl.selectionStart;
   var endPos = ctl.selectionEnd;
   alert(startPos + ", " + endPos);
};

Upvotes: 2

SpYk3HH
SpYk3HH

Reputation: 22580

I have a nice jQuery Extension perfect for this type of thing at this gist:

https://gist.github.com/2206057

To use it just do something like:

$("#eleID").cursor(); // will return current cursor state for that element
$("#eleID").cursor("pointer"); // will change ele cursor to whatever is ""
$("#eleID").cursor("clear"); // will change ele cursor to default
$("#eleID").cursor("ishover"); // will return boolean of if mouse is over element or not
$("#eleID").cursor("position"); // will return cursor's current position in "relation" to element

also 

$.cursor("wait") // will change document cursor to whatever is ""
$.cursor($("#eleID"), "wait"); // same as $("#eleID").cursor("wait");
$.cursor("position") // will return current cursor position

should also mention, if you submit multiple elements like $("#eleID1, .elementsWiththisClass") for "position" and "isHover" then it will return an Array containing objects like:

var poses = $("#eleID1, .elementsWiththisClass").cursor("position") //  will equal
poses[0] = {
    ele: e.fn.e.init[1], // the jquery element
    x: XXX, //  where XXX is the cursors current position in relation to element
    y: XXX
}
poses[1] = { // ...and so on and so forth for each element

Upvotes: 1

P4ul
P4ul

Reputation: 770

You could do this, but its not pretty, and will probably be quite slow depending on how many elements you have on your page.

$('*').mouseenter(function(){
    var currentCursor = $(this).css('cursor') ;

    //do what you want here, i.e.
    console.log( currentCursor );
});

Upvotes: 4

Gordon Gustafson
Gordon Gustafson

Reputation: 41259

I think you can read the cursor css property just like you can set it, but you have to do this from a specific element because AFAIK there's no way to just read the cursor type from the window or document object. Following this logic, to get the current cursor type you would have to find the current element the mouse is over and read its cursor css. However, you'd constantly have to check to see if the cursor changed, which is slow and error prone (As a rule you should almost always try to try to put your code in an event handler to react to something instead of constantly checking if its happened yet and putting your code in that function its more logical, efficient, robust, and clear.)

But the idea of detecting the cursor type still fascinates me, and if anyone knows how I'd love to hear about it. :D

As an alternate solution, rather than reading the cursor type, why don't you just set an event handler for when it enters an element that would change it? This would be a lot less error prone and probably more direct, because I don't think you care so much about the cursor, but if the mouse has entered a specific element.

$("#textbox").mouseover( function() { 
    //I know the cursor has changed because it is now in a textbox
});

Upvotes: 0

Related Questions