Реализуйте функцию автоматического копирования буфера обмена, нажав кнопку на передней панели

HTML
Реализуйте функцию автоматического копирования буфера обмена, нажав кнопку на передней панели

【содержание】

  • четкие потребности
  • html-анализ
    • Код
  • css-анализ
  • анализ js
    • Код

Пока это текст, его можно скопировать долгим нажатием, чтобы выбрать его, но его нельзя остановить, если придет запрос:

четкие потребности

Чтобы улучшить взаимодействие с пользователем, нажмите кнопку [Копировать], чтобы автоматически скопировать в буфер обмена, затем интерфейс должен реализовать эту функцию.

Прежде всего, давайте посмотрим на итоговую картинку после уточнения требований:copy.jpg

html-анализ

Слева находится текстовое поле ввода, только для чтения, а справа — кнопка.

Код:

<!--左边是一个input输入框，要求只读，而且里面的内容通过url?后面的code传入-->
<input type="text" value="AJS4EFS" readonly id="textAreas"/>
<!--右边是一个按钮-->
<a href="javascript:;" class="cuteShareBtn" id="copy">复制</a>

css-анализ

Просто пропустите этот материал, это не главное.

анализ js

  1. Нажмите кнопку, чтобы получить входной объект

Решение:

  1. Если используется jquery, то входной объект выбирается напрямую с помощью $("#textArea").select()
  2. Если вы используете zepto, описанный выше метод заключается в том, что полученный объект zepto не поддерживает собственный метод select(), тогда используйте собственный метод

var obj = document.getElementById("textAreas"); obj.select();

  1. затем скопируйте в буфер обмена

две строки? Это кажется простым? Ха-ха~ Тогда ты ошибаешься, здесь есть ямы. Во-первых, в настоящее время не существует идеального метода, совместимого с различными браузерами и мобильными терминалами, то же самое верно и для ссылок на плагины. Лучший способ проверить на долгое время — использоватьdocument.execCommand("Copy")Совместимость хорошая:use1.jpg use.jpg

Мобильный телефон поддерживает Android до 4.1, возможны различные браузеры,Но только ios не поддерживается, подойди и дай мне нож, ios, за что ты ограничиваешь? Это для того, чтобы сохранить телефон в безопасности или что-то в этом роде. так простоПК сторонаДля этого используйте следующие строки кода:

Код

//复制按钮事件绑定
$("#copy").on("tap",function(){
  //获取input对象
  var obj = document.getElementById("textAreas");
  //选择当前对象
  obj.select(); 
  try{
    //进行复制到剪切板
    if(document.execCommand("Copy","false",null)){
      //如果复制成功
      alert("复制成功！");  
    }else{
      //如果复制失败
      alert("复制失败！");
    }
  }catch(err){
    //如果报错
    alert("复制错误！")
  }
})

что еслимобильныйЕсли это так, то он должен быть совместим с IOS, но все еще в системе iPhone 5 10.2 он все равно показывает, что копирование не удалось Из-за низкого уровня использования пользователей совместимость выполняется здесь, и эти пользователи могут ее скопировать. вручную. Следующие два метода можно скопировать, потому что основной код состоит всего из нескольких строк, сначала простой:

$("#copy").on("tap",function(){
  //获取input对象
  var obj = document.getElementById("textAreas");
  //如果是ios端
  if(isiOSDevice){
    // 获取元素内容是否可编辑和是否只读
    var editable = obj.contentEditable;
    var readOnly = obj.readOnly;

    // 将对象变成可编辑的
    obj.contentEditable = true;
    obj.readOnly = false;

    // 创建一个Range对象，Range 对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域
    var range = document.createRange();
   //获取obj的内容作为选中的范围
    range.selectNodeContents(obj);
    
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    obj.setSelectionRange(0, 999999);  //选择范围，确保全选
    //恢复原来的状态
    obj.contentEditable = editable;
    obj.readOnly = readOnly;
    //如果是安卓端    
  }else{
    obj.select();
  }
  try{
    if(document.execCommand("Copy","false",null)){
      alert("复制成功！");  
    }else{
      alert("复制失败！请手动复制！");
    }
  }catch(err){
    alert("复制错误！请手动复制！")
  }
})

Ниже приведен метод относительно полной обновленной версии, который аналогичен плагину Clipboard.js, но в нем не так много кода, поэтому его можно использовать напрямую. Это получает не входной объект, а контент, который необходимо скопировать.

//定义函数
window.Clipboard = (function(window, document, navigator) {
  var textArea,
      copy;

  // 判断是不是ios端
  function isOS() {
    return navigator.userAgent.match(/ipad|iphone/i);
  }
  //创建文本元素
  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.value = text;
    document.body.appendChild(textArea);
  }
  //选择内容
  function selectText() {
    var range,
        selection;

    if (isOS()) {
      range = document.createRange();
      range.selectNodeContents(textArea);
      selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      textArea.setSelectionRange(0, 999999);
    } else {
      textArea.select();
    }
  }

//复制到剪贴板
  function copyToClipboard() {        
    try{
      if(document.execCommand("Copy")){
        alert("复制成功！");  
      }else{
        alert("复制失败！请手动复制！");
      }
    }catch(err){
      alert("复制错误！请手动复制！")
    }
    document.body.removeChild(textArea);
  }

  copy = function(text) {
    createTextArea(text);
    selectText();
    copyToClipboard();
  };

  return {
    copy: copy
  };
})(window, document, navigator);

использовать функцию

//使用函数
$("#copy").on("tap",function(){
  var  val = $("#textAreas").val();
  Clipboard.copy(val);
});

Таким образом реализована функция автоматического копирования буфера обмена по нажатию кнопки на фронтенде. версия 1.0 - 2018/5/6, впервые создана функция автоматического копирования буфера обмена по нажатию кнопки на лицевой стороне ©burning_rhyme семь семь

Категории