Определять тип курсора

Я хочу, чтобы код JavaScript обнаружил тип курсора.

Например, когда курсор зависает в textarea, он изменяется от значения по умолчанию к тексту.

Ответ 1

Вы можете сделать это, но это не очень, и, вероятно, будет довольно медленным в зависимости от того, сколько элементов у вас на вашей странице.

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

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

Ответ 2

Вы можете определить тип курсора с помощью JavaScript

как

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

и код JavaScript должен выглядеть примерно так:

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

вы также можете посмотреть Jsfiddle для обнаружения курсора Js

приведенный выше код Jquery написан, вы также можете использовать Vanilla JS, для которого вам просто нужно изменить его на

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

и JavaScript должен выглядеть примерно так:

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

Ответ 3

У меня есть приятное расширение JQuery, идеально подходящее для этого типа вещей в этом контексте:

https://gist.github.com/2206057

Чтобы использовать его, просто выполните что-то вроде:

$("#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 current position in "relation" to element

также

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

также следует упомянуть, если вы отправляете несколько элементов, таких как $("#eleID1, .elementsWiththisClass") для "position" и "isHover", тогда он возвращает объекты Array, такие как:

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

Ответ 4

Я думаю, вы можете прочитать свойство cursor css так же, как вы можете его установить, но вы должны сделать это из определенного элемента, потому что AFAIK не может просто прочитать тип курсора из окна или объекта документа. Следуя этой логике, чтобы получить текущий тип курсора, вам нужно будет найти текущий элемент, который находится над мышью, и прочитать его cursor css. Тем не менее, вам постоянно нужно проверять, изменился ли курсор, который медленный и подвержен ошибкам (как правило, вы почти всегда пытаетесь поместить свой код в обработчик события, чтобы что-то реагировать, а не постоянно проверять, его произошло еще и добавив ваш код в эту функцию более логичным, эффективным, надежным и понятным.)

Но идея обнаружения типа курсора по-прежнему очаровывает меня, и если кто-нибудь знает, как мне хотелось бы услышать об этом.: D


Как альтернативное решение, а не чтение типа курсора, почему бы вам просто не задать обработчик событий, когда он введет элемент, который изменит его? Это было бы намного меньше подверженности ошибкам и, вероятно, более прямолинейным, потому что я не думаю, что вы так много заботитесь о курсоре, но если мышь ввела определенный элемент.

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