如何将键盘侦听器添加到我的 onClick 处理程序？答案

【问题标题】：How to add a keyboard listener to my onClick handler?如何将键盘侦听器添加到我的 onClick 处理程序？
【发布时间】：2018-07-12 12:59:05
【问题描述】：

我有以下：

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>
    );
  }
}

我的 CSS：

.magicHelper {
  width: 100%;
  height: 100%;
}
textarea {
  line-height: 32px;
}

我需要这个，因为我需要 textarea 的占位符在页面中水平和垂直居中。鉴于 textarea 不能垂直居中文本，我需要保持 textarea 的高度较短。因此，我需要这样做，当用户在文本区域之外单击时，认为他们正在单击文本区域，文本区域会自动聚焦。

这会导致 ESLint 错误：

"Visible, non-interactive elements with click handlers must have at least one keyboard listener".

如何更新以上内容以通过 eslint？

【问题讨论】：

标签： javascript reactjs textarea eslint

【解决方案1】：

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

这条规则似乎是为了强制执行无障碍标准。

基于此，更改您的代码以执行类似的操作

<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>

你也可以禁用 eslint 中的规则，我想这取决于偏好。

【讨论】：

我们如何输入这个？

【解决方案2】：

来自 ESLINT 文档：

Enforce onClick 至少伴随以下之一：onKeyUp、onKeyDown、onKeyPress。键盘编码对于不能使用鼠标的身体残疾用户、AT 兼容性用户和屏幕阅读器用户来说非常重要。

在这种情况下，您可以禁用规则或更新您的代码。最好更新您的代码以符合网络标准。

 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>
        );
      }
    }

【讨论】：

【解决方案3】：

我在提交 git 消息时遇到了这种问题。我当时有以下代码。

<span onClick={myHome}  className="home__home-header__mybb__mybb-links__ML1" >

为了避免这种情况，我在元素中使用了以下属性。

aria-hidden="true"

【讨论】：

但是这样屏幕阅读器甚至不会知道有。一个按钮。在这些情况下，我们必须将角色添加为按钮。
@Kodali444，我正在阅读有关 aria-hidden 的信息，并且想知道我是否仍会保留我的 div 或按钮的功能，对吗？只是辅助功能被禁用了，对吧？

【解决方案4】：

您可以通过添加至少一个键盘侦听器来传递 ESLint 警告/错误，正如 Kaysser 所回答的那样。但我宁愿在这里解决真正的问题，即在浏览器和屏幕阅读器无法点击的元素上设置点击和键盘监听器。

错误消息（“带有点击处理程序的可见、非交互式元素必须至少有一个键盘侦听器”）在您考虑时描述了很多；您已将单击处理程序添加到用于显示信息而不是供用户交互的元素。除了添加键盘侦听器之外，您还应该将光标更改为悬停时的指针、添加 tabindex、角色等，以使其易于访问和理解。

最好的解决方法是将div 元素更改为button，这样可以解决 ESLint 警告，但也会告诉所有浏览器和屏幕阅读器这是一个交互式元素，您可以使用各种指针单击它（鼠标、键盘、手指、触控笔）。

class MyTextArea extends React.Component {
  render() {
    return (
      <button className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </button>
    );
  }
}

【讨论】：

我希望 linter 通知会建议“如果您要制作按钮，请使用按钮”

【解决方案5】：

用role、onKeyPress和tabIndex属性表示元素的角色：

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
  Save
</div>

【讨论】：

【解决方案6】：

你可以使用 onMouseDown 代替 onClick

【讨论】：

【解决方案7】：

对于不能或不想使用鼠标的人，onclick 处理程序可能不够用。所以 ESLint 将此标记为可访问性问题，直到您也添加 onKeyDown 处理程序。

【讨论】：

【解决方案8】：

对于那些使用<img /> 标记出现此错误的人，您可以将其替换为<input type="image" /> 标记。所以，改成：

<img alt="" src={} onClick={} />

到：

<input type="image" alt="" src={} onClick={} />

【讨论】：