首页 文章

将光标发送到React中输入值的末尾

提问于
浏览 次
2

我在单击删除时动态地将值传递给我的输入字段（为了编辑最后一个输入条目） .

我可以看到，在Chrome中，一旦输入值被渲染，光标就显示出单词的开头，而在Safari中，Firefox会在值的末尾出现，但最后一个字母会被删除 .

如何在不删除最后一个字母的情况下始终在末尾看到光标（除非我按后退两次）？

tagEvent(e) {
    const tag = this.text.value;
    const tagGroup = tag.split(" ");
    const tiles = this.props.tiles;
    const hasTiles = Object.keys(tiles).length > 0;

    if(e.keyCode === 32 || e.keyCode === 13){
      e.preventDefault();
      tagGroup.map(tag => this.props.addTile(tag));
      this.tagForm.reset();
    }

    if(e.keyCode === 8 && hasTiles && tag === '' ) {
      this.props.editLastTile();
      this.tagForm.reset();
    }
  }

  render() {
    return (
      <div className="input-wrapper">
        <form ref={(input) => this.tagForm = input}>
          <input ref={(input) => this.text = input}
                 type="text"
                 name="new-item"
                 placeholder="type and press space"
                 autoComplete="off"
                 defaultValue={this.props.value}
                 onKeyDown={(e) => this.tagEvent(e)} />
        </form>
      </div>
    )
  }

Here a Pen with the full code

非常感谢您的帮助！

javascript reactjs

1 回答

  • 3

    您可以显式设置光标位置，为此添加到 Input ：

    componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
        this.text.selectionStart = this.text.value.length;
        this.text.selectionEnd = this.text.value.length;
    }
}

    要防止删除最后一个字符，请在 if(e.keyCode === 8 && hasTiles && tag === '' ) { 之后添加 e.preventDefault()

    已编辑Pen

    回复于

相关问题