js复制链接并且选中文本

一时失言乱红尘 2023-02-28 05:59 33阅读 0赞

先看看效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]

然后再看看代码

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，一起成长  
![石马上coding][coding]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20230209/803d40c4e98d42d49a8abbf683cf93bf.png
[coding]: /images/20230209/fde975c2eb52410eb33ee98bf260de81.png