Javascript 如何将键盘侦听器添加到我的 onClick 处理程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48575674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a keyboard listener to my onClick handler?
提问by AnApprentice
I have the following:
我有以下几点：
class MyTextArea extends React.Component {
handleClick = () => {
this.focus();
}
focus = () => this.ref.focus;
handleRef = (component) => {
this.ref = component;
};
render() {
return (
<div className="magicHelper" onClick={this.handleClick}>
<textarea></textarea>
</div>
);
}
}
My CSS:
我的CSS：
.magicHelper {
width: 100%;
height: 100%;
}
textarea {
line-height: 32px;
}
I need this because I need the textarea's placeholder are to be horizontally and vertically centered in the page. Given textareas can't vertically center text, I need to keep the height of the textarea short. I therefore need to make it so when the user clicks outside of the textarea, thinking they are clicking the the textarea, the textarea auto focuses in.
我需要这个，因为我需要 textarea 的占位符在页面中水平和垂直居中。鉴于 textareas 不能垂直居中文本，我需要保持 textarea 的高度短。因此，我需要这样做，当用户在 textarea 之外单击时，认为他们正在单击 textarea，textarea 会自动聚焦。
This is causing an ESLint error: "Visible, non-interactive elements with click handlers must have at least one keyboard listener". How can I update the above to pass eslint?
这会导致 ESLint 错误：“具有点击处理程序的可见、非交互式元素必须至少有一个键盘侦听器”。如何更新上述内容以通过 eslint？
回答by Kaysser Kayyali
It seems this rule is to enforce Accessibility standards.
这条规则似乎是为了强制执行可访问性标准。
Based on this, change your code to do something like this
基于此，更改您的代码以执行以下操作
<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>
You could also disable the rule in eslint, I suppose it depends on preference.
您也可以禁用 eslint 中的规则，我想这取决于偏好。
回答by hannad rehman
from ESLINT documents:
来自 ESLINT 文档：
Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
Enforce onClick 至少伴随以下一项：onKeyUp、onKeyDown、onKeyPress。键盘编码对于无法使用鼠标的身体残疾用户、AT 兼容性和屏幕阅读器用户来说非常重要。
in this case you can either disable the rule or update your code. its better to update your code to meet the web standards.
在这种情况下，您可以禁用规则或更新您的代码。最好更新您的代码以满足网络标准。
class MyTextArea extends React.Component {
handleClick = () => {
this.focus();
}
handleKeyDown = (ev) => {
// check keys if you want
if (ev.keyCode == 13) {
this.focus()
}
}
focus = () => this.ref.focus;
handleRef = (component) => {
this.ref = component;
};
render() {
return (
<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
<textarea></textarea>
</div>
);
}
}
回答by Calsal
You can pass the ESLint warning/error by adding at least one keyboard listener, as answered by Kaysser. But I'd rather fix the real problem here, which is having click and keyboard listeners on an element that's not recognised as clickable by browsers and screen readers.
您可以通过添加至少一个键盘侦听器来传递 ESLint 警告/错误，正如Kaysser所回答的那样。但我宁愿在这里解决真正的问题，即在浏览器和屏幕阅读器无法识别为可点击的元素上具有点击和键盘侦听器。
The error message ("Visible, non-interactive elements with click handlers must have at least one keyboard listener") describes a lot when you think about it; you've added a click handler to an element that's made to display information and not for the user to interact with. On top of adding a keyboard listener you should also change the cursor to a pointer on hover, add tabindex, role etc. to make it accessible and comprehensible.
错误消息（“具有单击处理程序的可见的非交互式元素必须至少有一个键盘侦听器”）在您考虑时描述了很多；您已经向一个元素添加了一个点击处理程序，该元素用于显示信息而不是供用户与之交互。除了添加键盘侦听器之外，您还应该将光标更改为悬停时的指针，添加 tabindex、role 等，使其易于访问和理解。
The best fix for this is to change the divelement to a button, that solves the ESLint warning but also tells all browsers and screen readers that this is an interactive element that you can click with all kinds of pointers (mouse, keyboard, finger, stylus).
解决此问题的最佳方法是将div元素更改为 a button，既解决了 ESLint 警告，同时也告诉所有浏览器和屏幕阅读器这是一个交互式元素，您可以使用各种指针（鼠标、键盘、手指、手写笔）单击它.
class MyTextArea extends React.Component {
render() {
return (
<button className="magicHelper" onClick={this.handleClick}>
<textarea></textarea>
</button>
);
}
}
