detect cursor type

Question

I want JavaScript code to detect the cursor type.

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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