其他分享
首页 > 其他分享> > 实现一个复制input框中文本内容的功能

实现一个复制input框中文本内容的功能

作者:互联网

一、场景

有时候,有些项目需要在表单中显示一些数据,但是这些数据是禁止编辑的,但是我们可能还需要在其他的地方去使用输入框中的数据,为了更好的提升用户体验感,此时一个复制该框中文本内容的功能就显得尤为重要。效果如下:在这里插入图片描述

在这里插入图片描述

二、如何去实现

我们知道ref 的基本用法是获取DOM元素,因此我们可以通过ref来获取想要操作的DOM元素,代码如下:

1、先声明inputRef这个ref类型

const inputRef = useRef<any>(null)

2、通过ref获取DOM元素

 <Form.Item
                label="推送接口"
                name="sendInterface"
                className="api-form"
              >
                <Input
                  ref={inputRef}
                  disabled={true}
                  addonAfter={
                    <a onClick={handleCopyClick}>
                      <AiIcon
                        type="#iconcopy"
                        color="#666666"
                        width={16}
                        height={16}
                        style={{ margin: '0 2px' }}
                      />
                    </a>
                  }
                />
              </Form.Item>

3、注册点击事件,并通过文档对象提供的一个execCommand方法获取到复制的内容,然后通过message.success提示复制成功。

const handleCopyClick = () => {
    inputRef.current.select()
    document.execCommand('copy')
    message.success('复制成功')
  }

标签:handleCopyClick,DOM,inputRef,获取,复制,input,文本,ref,框中
来源: https://blog.csdn.net/m0_46412825/article/details/121349430