js複製連結並且選中文字

先看看效果圖

然後再看看程式碼

import React, { useState } from 'react'
import {  Input, message } from 'antd';
import './index.scss'
import fly from '../../api/flyio'


/**
 * 7：職位詳情的分享
 */
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>
}

  );
};

公眾號

歡迎大家關注我的公眾號： 石馬上coding，一起成長