Firing a Keyboard Event in Safari, Using JavaScript

Firing a keyboard event, webkit keyboard event doesn't fire

The most obvious thing is the simple typo on the following line:

var key = e.keycode ? e.keycode : e.which;

It should be keyCode rather than keycode.

Other than that, there are problems in the addEventHandler function. I suggest the following:

function addEventHandler(node,type,fn){
    if (typeof node.addEventListener !== "undefined"){
        /* DOM-compliant method */
        node.addEventListener( type, fn,false );
    } else if (typeof node.attachEvent !== "undefined") {
        /* IE */
        node.attachEvent( "on" + type, fn );
    }
}

Two things: first, it's better to check for attachEvent directly rather than infer its existence from the existence of window.event. In fact, window.event exists in Safari and Chrome but not (I think) attachEvent, so that dodgy inference is preventing your code from working.

Secondly, it's better to check for the DOM standard addEventListener first and use it where it exists rather than attachEvent. Opera, for example, has both but only addEventListener is standardised.

Firing a keyboard event on Chrome

I just want to throw this basic snippet out there. It works in Chrome and is based on the hack mentioned by Paul Irish.

It uses charCode instead of keyCode (which can be useful in certain situation), but adapt to keyCode if you so please.

var keyboardEvent = new KeyboardEvent('keypress', {bubbles:true}); 
Object.defineProperty(keyboardEvent, 'charCode', {get:function(){return this.charCodeVal;}}); 
keyboardEvent.charCodeVal = [your char code];
document.body.dispatchEvent(keyboardEvent);

How to send Keyboard events (e.g. Backspace, Delete) in Safari from Javascript

Since there seem to no way out, i found myself constrained to install my own backspace event handler. The working code (without logging now) is here:


    <html>
    <head>
    <title>Test Textarea Events</title>
    <script type="text/javascript">
    function sendBackEvent() {
        var textarea = document.getElementById("textarea");
        if(!textarea) {
            return;
        }
        var ke1 = document.createEvent("Events");
        ke1.initEvent("keydown", true, true);
        ke1.keyCode = ke1.which = 8; // Backspace
        textarea.dispatchEvent(ke1);

        var ke2 = document.createEvent("Events");
        ke2.initEvent("keyup", true, true);
        ke2.keyCode = ke2.which = 8; // Backspace
        textarea.dispatchEvent(ke2);
    }
    function handleBackEvent(e) {
        if(e.keyCode != 8) {
            return;
        }
        if (textarea.value.length == 0) {
            return;
        }
        var text = textarea.value;
        var selectionStart = textarea.selectionStart;
        var selectionEnd = textarea.selectionEnd;
        if (selectionStart < selectionEnd) {
            var text1 = (selectionStart > 0 ? text.slice(0, selectionStart) : "");
            var text2 = (selectionEnd < text.length ? text.slice(selectionEnd) : "");
            textarea.value = text1 + text2;
        }
        else if (selectionStart > 0) {
            var text1 = (selectionStart - 1 > 0 ? text.slice(0, selectionStart - 1) : "");
            var text2 = (selectionStart < text.length ? text.slice(selectionStart) : "");
            textarea.value = text1 + text2;
            selectionStart--;
        }
        textarea.selectionStart = textarea.selectionEnd = selectionStart;
        e.preventDefault();
        e.stopPropagation();
        return false;
    };
    var textarea;
    function init() {
        textarea = document.getElementById("textarea");
        if(!textarea) {
            return;
        }
        textarea.addEventListener("keydown", handleBackEvent, false);
    }
    </script>
    </head>
    <body onload="init()">
    <textarea id="textarea" name="text" cols="100" rows="20"></textarea><br/><br/>
    <button onclick="sendBackEvent()">send BackEvent</button>
    </body>
    </html>

Just in case someone else run into same trouble.

Keyboard Events for Modifier Keys in Safari 2.0

Safari 2 does not fire key events for any modifier keys (the code wasn't added until the S3 cycle) -- the best you could do is look at the modifier flags on any events you are processing.

Failing that, remember that Safari 3+ exist on tiger, and iirc are part of 10.4.11 so you should really be able to rely on the existence of S3+

Firing a Keyboard Event in Safari, Using JavaScript

Firing a keyboard event, webkit keyboard event doesn't fire

Firing a keyboard event on Chrome

How to send Keyboard events (e.g. Backspace, Delete) in Safari from Javascript

Keyboard Events for Modifier Keys in Safari 2.0

Related Topics

Leave a reply