javascript - 覆盖输入框的焦点触发器

Question

正如您在下面的 gif 中看到的那样，trello 的列表标题是输入框，在单击时会获得焦点，但如果长按则不会获得焦点。如何实现此功能？我正在使用反应，所以没有 jquery，但香草 js 很好，谢谢

标签： javascriptreactjsonclickinputbox

Answer 1

是长按

class App extends Component {
  constructor() {
    super()
    this.handleButtonPress = this.handleButtonPress.bind(this)
    this.handleButtonRelease = this.handleButtonRelease.bind(this)
  }
  handleButtonPress () {
    this.buttonPressTimer = setTimeout(() => alert('long press activated'), 1500);
  }

  handleButtonRelease () {
    clearTimeout(this.buttonPressTimer);
  }

  render() {
    return (
      <div 
          onTouchStart={this.handleButtonPress} 
          onTouchEnd={this.handleButtonRelease} 
          onMouseDown={this.handleButtonPress} 
          onMouseUp={this.handleButtonRelease} 
          onMouseLeave={this.handleButtonRelease}>
        Button
      </div>
    );
  }
}

原文：react 长按事件