Question

我正在构建自动完成功能。一切正常，除了我到达输入末尾时。当我以编程方式更改输入的值时，在输入内容之前，输入不会滚动/聚焦在光标上。

我尝试在Private Sub Form_Current() optDealerPay.Enabled = Nz(optDealerPay, 0) optCustomerPay.Enabled = Nz(optCustomerPay, 0) optNoTradeIn.Enabled = Nz(optNoTradeIn, 0) End Sub上执行类似的操作，但它确实起作用，但是除了有点“脏”之外，我不想使用componentDidUpdate，因为我正在关闭此的自动完成弹出窗口事件。

onBlur

我怎么能做到这一点，特别是没有setTimeout(() => { this.refInput.input.selectionStart = this.refInput.input.selectionEnd = this.state.value.length; this.refInput.input.blur(); this.refInput.input.focus(); }, 1);的时候？如果我在没有setTimeout的情况下无法正常工作。

Answer 1

我会用useEffect钩子

import React, { useEffect } from 'react'

//
//

useEffect(()=>{
    this.refInput.input.selectionStart = this.refInput.input.selectionEnd =  this.state.value.length;
    this.refInput.input.blur();
    this.refInput.input.focus();
 },[this.state.value, this.refInput.input.selectionStart, this.refInput.input.selectionEnd])

Answer 2

我做到了。不幸的是，它不是很漂亮。我仍然需要使用blur和setTimeout事件。

onBlur = () => {
  setTimeout(() => {
    if (this.refInput.input !== document.activeElement) {
      console.log(this.refInput.input.selectionEnd);
      this.setState({ helperVisible: false });
      this.props.clearAutoComplete();
    }
  }, 1);
};

(...)

componentDidUpdate(prevProps, prevState, snapshot) {
  const { value } = this.state;
  if (prevState.value !== value) {
    setTimeout(() => {
      this.refInput.input.selectionStart = this.refInput.input.selectionEnd = this.state.value.length;
      this.refInput.input.blur();
      this.refInput.input.focus();
    }, 0);
}

如果任何人对如何改善这一点有任何想法，那就太好了。否则，我会将其标记为正确答案。

Answer 3

以下应获取元素。专注于它。然后将选择范围移动到当前值的末尾。这符合避免blur（）的愿望。 CAVEAT：有时在此代码段和Codepen中似乎无法正确触发。

(function () {
	const el = document.getElementById('dataList'),
    val = 'this is my value',
		len = val.length;
	el.focus();
  el.value = val;
	setTimeout(function () { el.setSelectionRange(len, len); }, 100);
})();

<input id="dataList">

聚焦期间更改值后如何聚焦输入的末尾

3 个答案: