有没有办法改变按键上按钮的css？答案

【问题标题】：Is there a way to change the css of the button on keypress?有没有办法改变按键上按钮的css？
【发布时间】：2020-09-15 19:14:40
【问题描述】：

https://codepen.io/corpsist/pen/NWGZqOb

class DrumPad extends React.Component{
constructor(props){
super(props);
}

render(){
return(
  <div>
              <button type="button" id='Q' className="btn btn-lg btn-dark" onClick=this.handleClick}>Q</button>

  </div> )

} }

需要更改 CSS 以使按钮在按下时与单击时看起来相同。

【问题讨论】：

当您说“按下”时，您是指在触摸设备上按下还是在按下键（Q、W 等）时按下？
如果在键盘上按下了一个键。

标签： javascript jquery css reactjs

【解决方案1】：

您可以将onKeyDown 附加到容器并获取被按下的键并使用它来设置一些状态以手动切换boostrap .active 类。

（我对您的组件进行了一些重新设计以使其更易于使用）

class DrumPad extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeButton: "" };
    this.buttons = [["Q", "W", "E"], ["A", "S", "D"], ["Z", "X", "C"]];
  }
  onKeyDown = e => {
    this.setState({ activeButton: e.key.toUpperCase() });
  };

  onMouseDown = buttonId => {
    this.setState({ activeButton: buttonId });
  };

  render() {
    const { activeButton } = this.state;
    return (
      <div className="container-fluid d-flex" onKeyDown={this.onKeyDown}>
        <div>
          {this.buttons.map(buttonRow => (
            <div className="row-sm-4">
              <div class="btn-group-toggle">
                {buttonRow.map(buttonId => (
                  <button
                    id={buttonId}
                    key={buttonId}
                    className={`btn btn-lg btn-dark ${
                      activeButton === buttonId ? "active" : ""
                    }`}
                    onMouseDown={() => this.onMouseDown(buttonId)}
                  >
                    {buttonId}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

我还不得不稍微调整一下引导样式：

.btn {
  margin: 3px;
}
.btn-group-toggle button.btn.btn-dark:focus,
.btn-group-toggle button.btn.btn-dark:active {
  box-shadow: none;
}

button.active {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

Updated codepen here

【讨论】：

【解决方案2】：

我假设你使用 Bootstrap 框架，所以你必须重新定义 .btn-*** 伪类的样式，如下所示：

.btn-dark.focus, .btn-dark:focus {
...your styles go here...
}

.btn-dark(:disabled):not(.disabled).active, .btn-dark(:disabled):not(.disabled):active {
    ...your styles go here...
}

【讨论】：

【解决方案3】：

在jquery的帮助下使用keypress/keyup的组合来切换颜色

$("button").keydown(function(e) {
    // Sets the color when the key is down...
    if(e.which === 13) {
    	$(this).css("background-color", "purple");
    }
});
$("button").keyup(function() {
    // Removes the color when any key is lifted...
    $(this).css("background-color", "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>

【讨论】：