时间戳

首页 > 解决方案 > SVG 的 tabIndex 在 IE 和 React 中不起作用

html - SVG 的 tabIndex 在 IE 和 React 中不起作用

问题描述

使用 react 组件时，svg文本元素的tabIndex在 IE11 和 Edge 中不起作用。

我期望使用 React 组件为 svg 中的文本元素执行按键事件。这似乎在 chrome 和 FF 中工作正常，但它在 IE11 和 Edge 中失败。

出于某种原因，当在 react 的 jsx 中设置时，在 IE 中未处理tabIndex属性，导致 svg 的文本没有焦点来执行按键操作。

<html>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {

    doSomething() {
        alert("Keypress captured");
    }

    render() {
        return (
        <div>
            <svg viewBox="0 -20 800 300">
                <text fill="#273039" fontSize="25" width="150" tabIndex="0" onKeyPress={this.doSomething}>
                    <tspan>Type something here!</tspan>
                </text>
            </svg>
        </div>
        );
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
);
</script>
</html>

这是在 chrome 和 IE 中尝试的示例： https ://jsfiddle.net/pabloherre/nou8rc4e

你们有什么解决方法吗？或者似乎是一个错误？

标签： htmlreactjsinternet-explorersvg

解决方案

您可以focusable="true"在<text>标签中添加。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
        class Greeting extends React.Component {

        doSomething() {
        alert("Keypress captured");
        }

        render() {
        return (
        <div>
            <svg viewBox="0 -20 800 300">
                    <text fill="#273039" fontSize="25" width="150" tabIndex="0" focusable="true" onKeyPress={this.doSomething}>
                        <tspan>Type something here!</tspan>
                    </text>
            </svg>
        </div>
        );
        }
        }
        ReactDOM.render(
        <Greeting />,
        document.getElementById('root')
        );
    </script>

推荐阅读