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.
NB I have also tried tabindex(0) and focus to no effect...
Thanks...
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.
正如用户ErikDahlström所建议的那样,您(第一个)需要添加一个焦点事件监听器。
svgRect.addEventListener('focus', function(){
this.addEventListener('keypress',function(e){
console.log(e.keyCode);
});
}, svgRect);
Tudormi的代码工作正常,但要小心memmoryleaks,因为每次你关注svgRect时,新的按键事件都会在该元素上注册。
链接地址: http://www.djcxy.com/p/8666.html上一篇: 为什么不同的标题具有相同的名称?
下一篇: 将键盘事件附加到HTML中的SVG元素