input 和 textarea，在进去页面，自动获取光标 ----- reactjs

最新推荐文章于 2024-07-17 14:47:00 发布

Passion is Energy

最新推荐文章于 2024-07-17 14:47:00 发布

阅读量1.7k

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/brucehongsen/article/details/120247847

版权

本文介绍了在ReactJS中如何使input和textarea在页面加载时自动获取光标，详细讨论了使用focus()方法和setSelectionRange()设置光标位置的技巧，以及为什么避免使用autoFocus属性，特别是在Safari浏览器中的兼容性问题。

摘要由CSDN通过智能技术生成

1. input 获取光标

import classNames from "classnames";
import React, { useEffect, useRef } from "react";
import { root } from "./index.module.scss";

export default function Input({ extra, onExtraClick, className, ...rest }) {
  /**************************************************************** */
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);
  /**************************************************************** */

  return (
    <div className={root}>
      <input
        className={classNames("input", className)}
        {...rest}
        ref={inputRef}
      />
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  );
}