html中键盘事件输入句子,javascript-events – 将键盘事件附加到HTML中的SVG元素

无论如何在浏览器中在

HTML中运行SVG时,是否将textInput或keypress(或实际上任何其他文本输入)事件附加到SVG元素？

我可以将一个eventhandler附加到document.documentElement但是当我通过任何机制将一个eventhandler附加到anykind的SVGElement时没有任何反应… svg,g,rect …

我从SVG规范中看到这不支持(W3 SVG list of events),但是任何浏览器都支持任何“额外”吗？

我无法让以下内容在Chrome或Firefox上运行…

Key event test

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;

}

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","keyup","keydown",eventHandlerType);

addEventHandler(svgRect,eventHandlerType);

addEventHandler(svgRect,eventHandlerType);

addEventHandler(nonSVG,eventHandlerType);

addEventHandler(nonSVG,eventHandlerType);

//We can get a keypress if we attach an event handler to the underlying document Element

addEventHandler(document.documentElement,eventHandlerType);

}

style="fill:yellow; ;stroke-width:2; stroke:rgb(0,0)" id="aRect" focusable="true"/>

如示例所示,我仍然可以回退’background’doc元素上的关键事件.有没有人有任何宠物图书馆,将这种技术与SVGElement相关联的技术.

注：我也试过tabindex(0)并且没有效果……

谢谢…