“Directory”

  • Clear requirements
  • HTML analysis
    • Code implementation
  • CSS analysis
  • Js analysis
    • Code implementation

As long as it is text, long press and select can be copied, but the need to block can not be blocked:

Clear requirements

To improve the user experience, clicking the “Copy” button automatically copies to the clipboard, so you need the front end to implement this function.

First take a look at the final picture after you have defined the requirements:

HTML analysis

On the left is an input text box, read only, and on the right is a button.

Code implementation:

<! -- On the left is an input box, which is read-only, and the contents of which are passed through the URL? The following code is passed in -->
<input type="text" value="AJS4EFS" readonly id="textAreas"/>
<! -- On the right is a button -->
<a href="javascript:;" class="cuteShareBtn" id="copy">copy</a>
Copy the code

CSS analysis

Skip that stuff. It’s not the point.

Js analysis

  1. Click the button to get the input object

Solution:

  1. $(“#textArea”).select() will select the input object
  2. If zepto is used and the zepto object is not supported by the native select() method, then use the native method

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

  1. Then copy it to the clipboard

Two lines? Doesn’t that look easy? Ha ha ~ that you are wrong, there are pits in this. First, there is no perfect way to work across browsers and mobile devices, and reference plug-ins are no different. The best thing to do is to use itdocument.execCommand(“Copy”)Compatibility is good:

Mobile phone Android support to 4.1, a variety of browsers can be, but only ios is not supported, to give me a knife, ios you this thing you limit what? Is to protect the phone security or something. So it’s just for the PC and it’s just a few lines of code:

Code implementation

// Copy button event binding
$("#copy").on("tap".function(){
  // Get the input object
  var obj = document.getElementById("textAreas");
  // Select the current object
  obj.select(); 
  try{
    // Copy to the clipboard
    if(document.execCommand("Copy"."false".null)) {// If the replication is successful
      alert("复制成功！");  
    }else{
      // If replication fails
      alert("Copy failed!"); }}catch(err){
    // If an error occurs
    alert("Copy error!")}})Copy the code

If it is a mobile terminal, it must be compatible with IOS, but still in the iPhone5 10.2 system, still show replication failure, due to low user usage, compatibility is done here, those users you manually copy it. Both of the following methods can be copied because the core code is only a few lines long. Let’s start with the simple one:

$("#copy").on("tap".function(){
  // Get the input object
  var obj = document.getElementById("textAreas");
  // On the ios side
  if(isiOSDevice){
    // Gets whether the element content is editable and read-only
    var editable = obj.contentEditable;
    var readOnly = obj.readOnly;

    // Make the object editable
    obj.contentEditable = true;
    obj.readOnly = false;

    // Create a Range object that represents a contiguous Range area of the document, such as one selected by the user dragging the mouse in a browser window
    var range = document.createRange();
   // Get the contents of obj as the selected range
    range.selectNodeContents(obj);
    
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    obj.setSelectionRange(0.999999);  // Select a range to ensure that all are selected
    // Restore the original state
    obj.contentEditable = editable;
    obj.readOnly = readOnly;
    // If it is androids
  }else{
    obj.select();
  }
  try{
    if(document.execCommand("Copy"."false".null)){
      alert("复制成功！");  
    }else{
      alert("Copy failed! Please copy manually!"); }}catch(err){
    alert("Copy error! Please copy manually!")}})Copy the code

The following is a more complete version of the upgrade method, and the plug-in clipboard.js, but the code is not much, just use it. Instead of retrieving the input object, this retrieves the content that needs to be copied.

// Define the function
window.Clipboard = (function(window.document, navigator) {
  var textArea,
      copy;

  // Check whether it is ios
  function isOS() {
    return navigator.userAgent.match(/ipad|iphone/i);
  }
  // Create the text element
  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.value = text;
    document.body.appendChild(textArea);
  }
  // Select the content
  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(); }}// Copy to clipboard
  function copyToClipboard() {        
    try{
      if(document.execCommand("Copy")){
        alert("复制成功！");  
      }else{
        alert("Copy failed! Please copy manually!"); }}catch(err){
      alert("Copy error! Please copy manually!")}document.body.removeChild(textArea);
  }

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

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

Copy the code

Using the function

// Use a function
$("#copy").on("tap".function(){
  var  val = $("#textAreas").val();
  Clipboard.copy(val);
});
Copy the code

In this way, the front click button to automatically copy the clipboard function. Version1.0 — 2018/5/6, created for the first time to realize the function of automatically copying the clipboard by clicking a button on the front end © Burning_ Rhymes qi qi