Question

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

我可以看到，在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

非常感谢您的帮助！

Answer 1

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

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

要防止删除上一个字符，请在e.preventDefault()

之后添加if(e.keyCode === 8 && hasTiles && tag === '' ) {

已编辑Pen

Answer 2

对于那些来这里尝试将其与react钩子一起使用的人?

一个简单的texfield组件，它将输入的类型切换为密码/文本，这是典型的情况，您希望通过单击按钮来切换类型并查看值来允许用户查看其密码。 / p>

function TextField() {
  const [type, setType] = useState('text');
  const inputRef = useRef(null);
  const onToggle = useCallback(() => {
    setType(current => type === 'text' ? 'password' : 'text');
    // Setting focus here
    inputRef.current.focus();
  }, []);
  useEffect(() => {
    // Moving cursor to the end
    inputRef.current.selectionStart = inputRef.current.value.length;
    inputRef.current.selectionEnd = inputRef.current.value.length;
  }, [type]);

  return (
    <div>
      <input
        ref={inputRef}
        type={type}
       />
       <button onClick={onToggle}>toggle type</button>
    </div>
  );
}

Answer 3

另一个简单的解决方案：

<input ref={ref => ref && ref.focus()}
    onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
    />

ref触发焦点，然后触发onFocus计算结束点并相应地设置光标。

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

3 个答案: