码迷,mamicode.com
首页 > Web开发 > 详细

js点击复制文本内容

时间:2020-12-08 12:34:26      阅读:11      评论:0      收藏:0      [点我收藏+]

标签:inpu   firefox   选择   ons   func   child   结束   style   util   

  没啥好说的,直接上代码:

/**
 * 复制文本内容
 * @param {*} cpStr 需要复制的文本内容
 */
function copyString (cpStr) {
  var orderNum = cpStr;
  // 数字没有 .length 不能执行selectText 需要转化成字符串
  var textString = orderNum.toString();
  var input = document.querySelector(‘#copy-input‘);
  if (!input) {
    input = document.createElement(‘input‘);
    input.id = "copy-input";
    input.readOnly = "readOnly";        // 防止ios聚焦触发键盘事件
    input.style.position = "absolute";
    input.style.left = "-1000px";
    input.style.zIndex = "-1000";
    document.body.appendChild(input)
  }

  input.value = textString;
  // ios必须先选中文字且不支持 input.select();
  selectText(input, 0, textString.length);
  console.log(document.execCommand(‘copy‘), ‘execCommand‘);
  if (document.execCommand(‘copy‘)) {
    document.execCommand(‘copy‘);
    utils.toasts(‘复制成功‘);
  }
  input.blur();

  // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
  // 选择文本。createTextRange(setSelectionRange)是input方法
  function selectText(textbox, startIndex, stopIndex) {
    if (textbox.createTextRange) {//ie
      var range = textbox.createTextRange();
      range.collapse(true);
      range.moveStart(‘character‘, startIndex);//起始光标
      range.moveEnd(‘character‘, stopIndex - startIndex);//结束光标
      range.select();//不兼容苹果
    } else {//firefox/chrome
      textbox.setSelectionRange(startIndex, stopIndex);
      textbox.focus();
    }
  }
}


// 复制单号
$(‘#copy-btn‘).on(‘click‘, function () {
  var copyString = ‘123456‘;
  // 复制文本内容
  copyString(copyString);
})

  ios和android都是可以使用的~

 

  

 

js点击复制文本内容

标签:inpu   firefox   选择   ons   func   child   结束   style   util   

原文地址:https://www.cnblogs.com/xlin021/p/14083470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!