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="" 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...
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/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...
Share Improve this question edited Oct 5, 2019 at 12:21 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 19, 2011 at 13:23 JFKJFK 1,67717 silver badges22 bronze badges 2- Works under IE9 because IE9 seems to implement the focusable="true" attribute on the rect. ( Drawing a dotted line around it ) – JFK Commented Jul 19, 2011 at 15:22
- Related question: stackoverflow./questions/6747848/… – ARno Commented Jul 7, 2021 at 13:12
4 Answers
Reset to default 5As 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.
Tudormi's code works fine, but be careful of memmoryleaks, because everytime you focus svgRect, new keypress event will be registered on that element.
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.