javascript 将第一个字符更新为大写后，光标移动到文本框的末尾

dphi5xsq 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(134)

尝试了很多方法来解决这个问题，但糟糕的是没有一个工作。我尝试更新输入字符串的第一个字符到文本框中的大写，这工作正常，但光标在编辑第一个字符后移动到文本框的末尾。
这是我的片段。

const textOnChange = (e) => {
    const value = capitalizeFirstString(e.target.value)
    setTitle(value);
  };
  const capitalizeFirstString = (str) => {
    return str && str.charAt(0).toUpperCase() + str.slice(1);
  };

字符串
尝试添加引用并设法设置光标位置，但不幸的是，尝试的解决方案无法按预期工作。
我的目标是在编辑字符串后将第一个字符转换为大写。
任何帮助都很感激。

JavaScript

来源：https://stackoverflow.com/questions/77742345/cursor-moves-at-the-end-of-text-box-after-updating-the-first-character-to-upper

1条答案

按热度按时间

4szc88ey1#

您可以通过保存当前selectionStart的状态，并在每次更新后使用setSelectionRange()输入法将其设置为useEffect，来保持插入符号在更改前的位置：

const { useState, useRef, useEffect } = React;
const capitalizeFirstString = str => str.charAt(0).toUpperCase() + str.slice(1);
  
const Demo = () => {
  const [title, setTitle] = useState('');
  const [cPos, setCPos] = useState(0);
  const ref = useRef();
  
  const textOnChange = (e) => {
    const value = capitalizeFirstString(e.target.value)
    
    setTitle(value);
    setCPos(e.target.selectionStart);
  };
  
  useEffect(() => {
    ref.current.setSelectionRange(cPos, cPos);
  }, [cPos]);
  
  return (
    <input 
      value={title} 
      onChange={textOnChange} 
      ref={ref} />
  );
};
ReactDOM
  .createRoot(root)
  .render(<Demo />);

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 将第一个字符更新为大写后，光标移动到文本框的末尾

1条答案

相关问题

热门标签

最新问答