Menu
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...
380
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);
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.
23
Tudormi's code works fine, but be careful of memmoryleaks, because everytime you focus svgRect, new keypress event will be registered on that element.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
