Question

我使用ReactJS来创建一个输入框，它自动处理字母到字母的替换（这样用户就不需要在他们的操作系统中添加特定的语言来输入该语言）。

输入使用JS使用简单的替换矩阵将所有英文字母转换为希腊字母。

问题是preventDefault（）（我用它来阻止原始字母出现）也阻止我的输入自动滚动到当前光标位置。

有没有办法以编程方式将输入滚动到当前光标位置？任何替代方案？

这是一个说明问题的JSFiddle：

substituteKey = event => {
    let letterToAdd = this.κeySubstitutions[event.keyCode];
    event.target.value += letterToAdd;
    this.handleOnChange(event);
    // the following line prevents input from scrolling
    event.preventDefault();
};

重现：

输入字母直到输入填满。没有滚动
按＆＃39; a＆＃39; （故意省略了换人）。输入按预期滚动（为了说明目的，故意不会为了字母＆＃39; a'而调用preventDefault）

Answer 1

似乎我必须专注于我的输入，然后滚动到左边，只要滚动宽度是。例如：

handleKeyDown = event => {
    if (this.κeySubstitutions[event.keyCode]) {
      // this calls preventDefault() 
      // but we will fix in a bit it by manually scrolling the input
      this.substituteKey(event);
    }

    // SOLUTION: these 2 lines manually scroll the input
    // be sure to add ref="myInput" when rendering your input
    this.refs.myInput.focus();
    this.refs.myInput.scrollLeft = this.refs.myInput.scrollWidth;
  };

非常感谢https://stackoverflow.com/users/2533679/stephen-kaiser 谁回答了一个非常相似的问题： "Scroll" to the very right of a long text input

preventDefault（）也阻止我的<input />滚动到游标

1 个答案: