欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js复制链接并且选中文本

程序员文章站 2022-03-07 11:35:24
先看看效果图然后再看看代码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, jobNa...

先看看效果图
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,一起成长
js复制链接并且选中文本

本文地址:https://blog.csdn.net/wangweiscsdn/article/details/107470632