Attaching keyboard events to an SVG Element inside HTML
Question
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.
NB I have also tried tabindex(0) and focus to no effect...
Thanks...
4 answers
solution1
3 2016-03-08 08:35:25
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);
solution2
3 ACCPTED 2011-07-19 14:08:01
A simple answer might be that the 'focusable' attribute isn't supported in those browsers. For key event listeners on eg a <rect> to make any sense there needs to be a concept of focus inside the svg.
solution3
1 2016-09-09 08:09:18
Tudormi's code works fine, but be careful of memmoryleaks, because everytime you focus svgRect, new keypress event will be registered on that element.
solution4
-2 2011-07-19 13:32:35
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.