javascript - 如何阻止光标跳到输入末尾

Question

我有一个受控的 React 输入组件，并且我正在格式化输入，如 onChange 代码中所示。

<input type="TEL" id="applicantCellPhone" onChange={this.formatPhone} name="applicant.cellPhone" value={this.state["applicant.cellPhone"]}/>

然后我的formatPhone函数是这样的

formatPhone(changeEvent) {
let val = changeEvent.target.value;
let r = /(\D+)/g,
  first3 = "",
  next3 = "",
  last4 = "";
val = val.replace(r, "");
if (val.length > 0) {
  first3 = val.substr(0, 3);
  next3 = val.substr(3, 3);
  last4 = val.substr(6, 4);
  if (val.length > 6) {
    this.setState({ [changeEvent.target.name]: first3 + "-" + next3 + "-" + last4 });
  } else if (val.length > 3) {
    this.setState({ [changeEvent.target.name]: first3 + "-" + next3 });
  } else if (val.length < 4) {
    this.setState({ [changeEvent.target.name]: first3 });
  }
} else this.setState({ [changeEvent.target.name]: val });

}

当我尝试删除/添加中间某处的数字，然后光标立即移动到字符串的末尾时，我开始遇到问题。

我在 solution by Sophie 看到了解决方案，但我认为这并不适用于此，因为 setState 无论如何都会导致渲染。我还尝试通过 setSelectionRange(start, end) 来操纵插入符位置，但这也没有帮助。我认为导致渲染的 setState 是让组件将编辑的值视为最终值并导致光标移动到末尾。

谁能帮我解决这个问题？

Answer 1

我担心，如果您放弃对 React 的控制，状态更改将不可避免地丢弃插入符号位置，因此唯一的解决方案是您自己处理它。

最重要的是，考虑到字符串操作，保留“当前位置”并不是那么简单......

为了尝试更好地解决问题，我用 react 钩子(Hook)提出了一个解决方案您可以在其中更好地了解发生了哪些状态变化

function App() {

  const [state, setState] = React.useState({});
  const inputRef = React.useRef(null);
  const [selectionStart, setSelectionStart] = React.useState(0);

  function formatPhone(changeEvent) {

    let r = /(\D+)/g, first3 = "", next3 = "", last4 = "";
    let old = changeEvent.target.value;
    let val = changeEvent.target.value.replace(r, "");

    if (val.length > 0) {
      first3 = val.substr(0, 3);
      next3 = val.substr(3, 3);
      last4 = val.substr(6, 4);
      if (val.length > 6) {
        val = first3 + "-" + next3 + "-" + last4;
      } else if (val.length > 3) {
        val = first3 + "-" + next3;
      } else if (val.length < 4) {
        val = first3;
      }
    }

    setState({ [changeEvent.target.name]: val });

    let ss = 0;
    while (ss<val.length) {
      if (old.charAt(ss)!==val.charAt(ss)) {
        if (val.charAt(ss)==='-') {
            ss+=2;
        }
        break;
      }
      ss+=1;
    }

    setSelectionStart(ss);
  }  

  React.useEffect(function () {
    const cp = selectionStart;
    inputRef.current.setSelectionRange(cp, cp);
  });

  return (
    <form autocomplete="off">
      <label for="cellPhone">Cell Phone: </label>
      <input id="cellPhone" ref={inputRef} onChange={formatPhone} name="cellPhone" value={state.cellPhone}/>
    </form>
  )  
}

ReactDOM.render(<App />, document.getElementById('root'))

link to codepen

希望对你有帮助