CODEWITHSUNDEEP
javascriptsvgdom-events
JFK
JFK

Reputation: 1677

Attaching keyboard events to an SVG Element inside HTML

Is there anyway to attach a textInput or keypress (or indeed any other text input) event to an SVG Element when running SVG inside HTML in a browser?

I can attach an eventhandler to document.documentElement but nothing happens when I attach an eventhandler via whatever mechanism to an SVGElement of anykind ... SVG, g, rect...

I see from the SVG spec that this is not supported (W3 SVG list of events), but do any Browsers support any 'extras'?

I cannot get the following to work on Chrome or Firefox...

<!DOCTYPE HTML>
<html>
<head>
<title>Key event test</title>
<style type="text/css">
body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #f00;
}

#main {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 80%;
    background: #0f0;
    float: right;
}

#drawArea {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
}

#side {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 20%;
    background: #00f;
    float: left;
}


</style>
<script type="text/javascript">

    function createBoundEventHandler(el, name) {
        var f = 
            function eventHandler(ev) {
    if("mousedown" === ev.type) {
        el.focus();
    }
    else {
        alert("asEventHandler: " + el.localName + " " + name + " " + ev.type);
    }
    return true;
            };
        return f;
    }

    function doEvent(event, elementName, eventName) {
        alert("asAttribute: " + elementName + " " + eventName + " " + event.type);
        return true;
    }

    function addEventHandler(element, eventName, type) {
        var attrName = "on" + eventName;
        var attrValue = "doEvent(evt, '" + element.localName + "', '" + eventName + "')";
        if("asAttribute" === type) {
            element.setAttribute( attrName, attrValue);
        }
        else {
            element.addEventListener(eventName, createBoundEventHandler(element, eventName), false);
        }
    }

    window.onload = function() { 
        var eventHandlerType = "asEventHandler"; //asAttribute asEventHandler

        var svgTarget = document.getElementById('drawArea');
        var svgRect = document.getElementById('aRect');
        var nonSVG = document.getElementById('side');

        addEventHandler(svgTarget, "keypress", eventHandlerType);
        addEventHandler(svgTarget, "mousedown", eventHandlerType);
        addEventHandler(svgTarget, "keyup", eventHandlerType);
        addEventHandler(svgTarget, "keydown", eventHandlerType);

        addEventHandler(svgRect, "keypress", eventHandlerType);
        addEventHandler(svgRect, "mousedown", eventHandlerType);
        addEventHandler(svgRect, "keyup", eventHandlerType);
        addEventHandler(svgRect, "keydown", eventHandlerType);

        addEventHandler(nonSVG, "keypress", eventHandlerType);
        addEventHandler(nonSVG, "mousedown", eventHandlerType);
        addEventHandler(nonSVG, "keyup", eventHandlerType);
        addEventHandler(nonSVG, "keydown", eventHandlerType);

        //We can get a keypress if we attach an event handler to the underlying document Element    
        addEventHandler(document.documentElement, "keypress", eventHandlerType);
    }
</script>
</head>
<body>
    <div id="side" tabindex="0">
    </div>
<div id="main">
    <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" id="drawArea" focusable="true" tabindex="0"> 
    <rect x="0" y="0" width="100" height="100"
            style="fill:yellow; ;stroke-width:2; stroke:rgb(0,0,0)" id="aRect" focusable="true"/>
    </svg>
</div>
</body>
</html>

As the example shows I can still fallback on key events on the 'background' doc element. Does anyone have any pet libraries, techniques for relating this back to an SVGElement.

N.B. I have also tried tabindex(0) and focus to no effect...

Upvotes: 10

Views: 9836

Answers (4)

Radovan Kuka
Radovan Kuka

Reputation: 2047

Tudormi's code works fine, but be careful of memmoryleaks, because everytime you focus svgRect, new keypress event will be registered on that element.

Upvotes: 2

Tudormi
Tudormi

Reputation: 1112

As user Erik Dahlström suggested, you (first) need to add an event listener for focus.

svgRect.addEventListener('focus', function(){
    this.addEventListener('keypress',function(e){
        console.log(e.keyCode);
    });
}, svgRect);

Upvotes: 5

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 61026

A simple answer might be that the 'focusable' attribute isn't supported in those browsers. For key event listeners on e.g a <rect> to make any sense there needs to be a concept of focus inside the svg.

Upvotes: 4

Pat
Pat

Reputation: 2238

Check out Raphael.js. Also, I've had a lot of success using MooTools. I'm sure you could probably add some event handlers with any JavaScript framework, if you didn't want to roll your own.

Upvotes: -2

Related Questions