Text cursor when using IE9

Our web game is showing an unusual behaviour on IE9. Whenever the mouse hovers over the canvas the cursor is changed to the text cursor.

This is not the behaviour in Chrome, Firefox, and Safari. For those browsers the cursor is the default cursor and I am also able to manipulate the cursor using the following call:

cc.canvas.style.cursor = ‘pointer’;

That call completes on IE and I can see that the canvas element actually gets this value for the cursor but visually there is no change. It appears that some other object must be sitting on top of canvas causing the cursor change.

This behaviour is not specific to my web application as the cursor becomes the text cursor on IE9 in both the cocos tests and in the moon warrior example:

http://www.cocos2d-x.org/cocos2d-html5/index.html
http://www.cocos2d-iphone.org/downloads/MoonWarriors/

Note that in both cases the cursor is the default cursor until cocos2d-html loads. I’ve been looking for the code that makes this happen but can’t seem to find it.

I’ve also noticed that on IE9 there are a number of empty text nodes injected into the html of all these pages (mine and the two examples) but I don’t know if this is a regular IE thing.

Thanks,
Alan

Seems that the code in ccKeyboardDispatcher.js is the issue in IE. I’ve been porting my game library to run on Windows 8 Javascript using this Cocos2D port and just ran into this issue a couple of days ago. In IE, if you call cc.canvas.setAttribute(‘contentEditable’, true), it will display the ibeam cursor. In some cases I found that the virtual keyboard popped up in the simulator when I pressed a key! If I set ‘contentEditable’ to false the ibeam disappears but the canvas does not receive any events.

My quick fix for this was to change a few lines in cc.KeyboardDispatcher.getInstance(). Basically I changed ‘cc.canvas.’ to ‘document.’ You can see my changes in the code below. I’m no expert in HTML or javascript so I could be doing this wrong but it works as a Win8 Javascript App. I have not tried it in the browser. Those tests are next week.

cc.KeyboardDispatcher.getInstance = function () {
    if (!cc.keyboardDispatcher) {
        cc.keyboardDispatcher = new cc.KeyboardDispatcher();
        //make canvas focusable
       // cc.canvas.setAttribute('contentEditable', true); //mark commented this line
        cc.canvas.style.outline = 'none';
        cc.canvas.style.cursor = 'default';
        document.addEventListener("keydown", function (e) { //mark 'document.' was 'cc.canvas'
            cc.keyboardDispatcher.dispatchKeyboardMSG(e, true);
            cc.IMEDispatcher.getInstance().processKeycode(e.keyCode);
        });
        document.addEventListener("keyup", function (e) { //mark 'document.' was 'cc.canvas'
            cc.keyboardDispatcher.dispatchKeyboardMSG(e, false);
        });
    }
    return cc.keyboardDispatcher;
};

Hope this helps.

Hi Mark,

Thanks for the reply. I was noticing the same pop up keyboard issue on my windows 7 phone and hadn’t got around to looking into that. I think you have solved that one for me as well!

I’ll apply the “changes” and let you know how it goes for me. I had been looking at that particular piece of code because it was also resetting the canvas.cursor to default. I was thinking about hacking about in this code but my HTML experience is limited so I was a bit fearful :slight_smile:

I think this will help,
Alan

This solution definitely gets me further along.

One problem that I am encountering on the IE desktop browser is that the point of the cursor seems to be in the wrong place (instead of near the top left of the icon at the point of the default cursor or the finger of the hand cursor it seems to be a box that is centered somewhere around the lower right).

Alan