【原】标梵互动教你js怎么点击复制链接并且选中文本?

To love is to enter into the inevitability of one day not being able to protect what is most valuable to you.

  ——Mohsin Hamid, Exit West

主要是要创建一个range，注释写的很清楚

import React, { useState } from 'react'

import {  Input, message } from 'antd';

import './index.scss'

export default ({ userInfomation = {}, type, isVisible, handleToggleLayer,  jobName = '' }) => {

  const [tabType, setTabType] = useState(1)

  const tenantId = localStorage.getItem('tenantId')

  const [inputValue, setInputValue] = useState(`${window.location.href}`)

  const onChangeInput = e => {

    // console.log(e.currentTarget.value);

    const v = e.currentTarget.value

    setInputValue(v)

  };

  //复制功能

  const copylink = () => {

    // 在选择节点的时候，一定要只选择input  

    const copyDOM = document.querySelector('.middel-layer input');  //需要复制文字的节点

    const range = document.createRange(); //创建一个range

    window.getSelection().removeAllRanges();   //清除页面中已有的selection

    range.selectNode(copyDOM);    // 选中需要复制的节点    

    window.getSelection().addRange(range);   // 执行选中元素

    const successful = document.execCommand('copy');    // 执行 copy 操作  

    if (successful) {

      // copyDOM.select();

      message.success('复制成功！')

    } else {

      message.warning('复制失败，请手动复制！')

    }

    // 移除选中的元素  

    window.getSelection().removeAllRanges();

  }

  const onSelectInput = () => {

    copyAccessKey()

    document.querySelector('.middel-layer input').select() // 选中

  }

  return <div className={`layer-container ${isVisible ? '' : 'isHidden'}`}>

    {

      type === 7 ?

        <div className='layer-content time-layer'>

          <div className='time-layer-top border-bo'>

            <div className='top-left'>

              <div className='top-item active-txt' onClick={() => setTabType(1)}>

                <span>链接分享</span>

                <i />

              </div>

            </div>

            <div className='close-time-img iconfont iconpopup-close-bt' onClick={() => handleToggleLayer(false)} />

          </div> 

          <div className='share-item'>

                <div className='middel-layer'>

                  <h4>分享职位：{jobName}</h4>

                  <Input

                    placeholder='链接'

                    allowClear={false}

                    onChange={e => onChangeInput(e)}

                    prefix='链接'

                    value={inputValue}

                    onFocus={() => onSelectInput()}

                  // defaultValue={inputValue}

                  />

                  <p>可以将链接发送给你的微信、QQ等好友</p>

                </div>

                <div className='share-bottom-btn'>

                  <span className='cancle-btn' onClick={() => handleToggleLayer(false)}>取消</span>

                  <span onClick={() => copylink()}>复制链接</span>

                </div>

              </div>

        </div> : ''

    }

  </div>

}

  );

};

看一下效果图吧

  

爱一个人，就不可避免地要面对有一天会失去心之所爱的风险。—— Mohsin Hamid, Exit West

文章来源:Biaofun标梵互动(https://www./)