1.效果图

这是在做一个字段分割的需求

 

2.思路

步骤一：通过document添加mouseup事件；

步骤二：通过window的getSelection()函数获取文本值；

步骤三：通过mouseup事件的event + 类名来限制可截取元素的范围；

步骤四：通过event的selectionStart属性和selectionEnd属性获取文本位置；

3.代码（react）

import React, { useState, useEffect } from '@alipay/bigfish/react';
import { Input } from 'antd';
const { TextArea } = Input;

export default (props: any) => {

  const [startOrEnd, setStartOrtEnd]: any = useState({
    num: null,
    start: null,
    end: null,
  });

  function handleMouseUp(event: any) {
    try {
      const isTextArea = event?.target?.className?.includes('isTextArea'); //指定有效文本框
      const values = event?.target?.value; //文本框的内容
      const value = window?.getSelection?.()?.toString(); //光标选中的值
      if (isTextArea && values && value) {
        const start: number = event?.target.selectionStart - 1; //开始位置索引
        const end: number = event?.target.selectionEnd - 1; // 结束位置索引
        setStartOrtEnd({ start, end, value });
      }
    } catch (error) {
      // 事件异常拦截
    }
  }

  useEffect(() => {
    document?.addEventListener('mouseup', handleMouseUp); // 添加鼠标松开事件处理程序
    return () => {
      document?.removeEventListener('mouseup', handleMouseUp); // 组件被卸载时移除事件处理程序
    };
  }, []);


  return <TextArea className="isTextArea" rows={16} />
};

 

代码看上去简单，PAI找起来属实不易，点个赞关注作者分享更多有用的知识～～～