在复制文本的底部添加短语

时间:2017-08-09 06:39:20

标签: javascript

任何人都可以帮忙吗?

以下代码只需点击一下按钮即可复制div中的文字。

现在我需要每次在复制文本的底部添加网站网址吗?

我正在帮助我的一位朋友,他问我这件事。我无法理解。 :(

这是非常复杂的代码,不知道是谁创建了这个代码,但现在我需要对其进行一些更改。请帮帮我。

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Cheval</title>
</head>

<body>
  <h2 style="margin-top: 8px; margin-bottom: 8px;">Java Script</h2>
  <hr>
  <textarea class="text-to-copy">JS is the future.</textarea>
  <p>
    <button class="js-copy-btn">Copy text</button>
  </p>

  <textarea rows="5" class="text-to-copy-0">Create as many elements as you want, and match them up by name.</textarea>
  <p>
    <button class="js-copy-btn-0">Copy text</button>
  </p>

  <textarea rows="5" class="text-to-copy-1">The button and elements do not need to be near each other.</textarea>
  <p>
    <button class="js-copy-btn-1">Copy text</button>
  </p>

  <textarea rows="5" class="foobar text-to-copy-3 bazzot">They can have as many other classes as you want.</textarea>
  <p>
    <button class="foobar js-copy-btn-3 bazzot">Copy text</button>
  </p>

  <input class="text-to-copy-input" value="Inputs work too!">
  <p>
    <button class="js-copy-btn-input">Copy text</button>
  </p>

  <div class="text-to-copy-2">You do not need to use a <code>textarea</code>, for example, this is a <code>div</code>!</div>
  <p>
    <button class="js-copy-btn-2">Copy text</button>
  </p>

  <div style="position: fixed; bottom: 5px; right: 5px;"><a href="https://github.com/ryanpcmcquen/cheval">source</a></div>
  <script>
    // @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2-or-later
    /*! cheval v1.1.0 by ryanpcmcquen */
    // Ryan P.C. McQuen | Everett, WA | ryanpcmcquen@member.fsf.org
    //
    // This program is free software: you can redistribute it and/or modify
    // it under the terms of the GNU General Public License as published by
    // the Free Software Foundation; either version 2 of the License, or
    // (at your option) any later version, with the following exception:
    // the text of the GPL license may be omitted.
    //
    // This program is distributed in the hope that it will be useful, but
    // without any warranty; without even the implied warranty of
    // merchantability or fitness for a particular purpose. Compiling,
    // interpreting, executing or merely reading the text of the program
    // may result in lapses of consciousness and/or very being, up to and
    // including the end of all existence and the Universe as we know it.
    // See the GNU General Public License for more details.
    //
    // You may have received a copy of the GNU General Public License along
    // with this program (most likely, a file named COPYING).  If not, see
    // <https://www.gnu.org/licenses/>.
    /*global window*/
    /*jslint browser:true*/
    (function() {
      "use strict";

      var textClassName = "text-to-copy";
      var buttonClassName = "js-copy-btn";
      var allowButtonTextToChange = true;
      var afterCopyText = {
        desktop: "Copied!",
        iPad: "Now tap the text, then 'Copy'",
        iPhoneOriPod: "Now tap 'Copy'",
        oldSafari: "Press Command + C to copy",
        notSupported: "Please copy manually"
      };
      var sets = {};
      var regexBuilder = function(prefix) {
        return new RegExp(prefix + "\\S*");
      };

      window.addEventListener("DOMContentLoaded", function() {
        var texts = Array.prototype.slice.call(document.querySelectorAll(
          "[class*=" + textClassName + "]"
        ));
        var buttons = Array.prototype.slice.call(document.querySelectorAll(
          "[class*=" + buttonClassName + "]"
        ));

        var classNameFinder = function(arr, regex, namePrefix) {
          return arr.map(function(item) {
            return (item.className.match(regex)) ?
              item.className
              .match(regex)[0].replace(
                namePrefix,
                ""
              ) :
              false;
          }).sort();
        };

        sets.texts = classNameFinder(
          texts,
          regexBuilder(textClassName),
          textClassName
        );

        sets.buttons = classNameFinder(
          buttons,
          regexBuilder(buttonClassName),
          buttonClassName
        );

        var matches = sets.texts.map(function(ignore, index) {
          return sets.texts[index].match(sets.buttons[
            index
          ]);
        });

        var throwErr = function(err) {
          throw new Error(err);
        };
        var iPhoneORiPod = false;
        var iPad = false;
        var oldSafari = false;
        var navAgent = window.navigator.userAgent;
        if (
          (/^((?!chrome).)*safari/i).test(navAgent)
          // ^ Fancy safari detection thanks to: https://stackoverflow.com/a/23522755
          &&
          !(/^((?!chrome).)*[0-9][0-9](\.[0-9][0-9]?)?\ssafari/i)
          .test(navAgent)
          // ^ Even fancier Safari < 10 detection thanks to regex.  :^)
        ) {
          oldSafari = true;
        }
        // We need to test for older Safari and the device,
        // because of quirky awesomeness.
        if (navAgent.match(/iPhone|iPod/i)) {
          iPhoneORiPod = true;
        } else if (navAgent.match(/iPad/i)) {
          iPad = true;
        }
        var cheval = function(btn, text) {
          var copyBtn = document.querySelector(btn);

          var setCopyBtnText = function(textToSet) {
            copyBtn.textContent = textToSet;
          };
          if (iPhoneORiPod || iPad) {
            if (oldSafari) {
              setCopyBtnText("Select text");
            }
          }
          if (copyBtn) {
            copyBtn.addEventListener("click", function() {
              var oldPosX = window.scrollX;
              var oldPosY = window.scrollY;
              // Clone the text-to-copy node so that we can
              // create a hidden textarea, with its text value.
              // Thanks to @LeaVerou for the idea.
              var originalCopyItem = document.querySelector(
                text
              );
              var dollyTheSheep = originalCopyItem.cloneNode(true);
              var copyItem = document.createElement(
                "textarea"
              );
              copyItem.style.opacity = 0;
              copyItem.style.position = "absolute";
              // If .value is undefined, .textContent will
              // get assigned to the textarea we made.
              var copyValue = dollyTheSheep.value ||
                dollyTheSheep.textContent;
              copyItem.value = copyValue;
              document.body.appendChild(copyItem);
              if (copyItem) {
                // Select the text:
                copyItem.focus();
                copyItem.selectionStart = 0;
                // For some reason the 'copyItem' does not get
                // the correct length, so we use the OG.
                copyItem.selectionEnd = copyValue.length;
                try {
                  // Now that we've selected the text, execute the copy command:
                  document.execCommand("copy");
                  // And disable the cloned area to prevent jumping.
                  // This has to come after the `copy` command.
                  copyItem.setAttribute(
                    "disabled",
                    true
                  );
                  // Allow the button text to be changed.
                  // Set `allowButtonTextToChange = false` to leave it alone.
                  // Default is `true`.
                  // Thanks to @jasondavis.
                  if (allowButtonTextToChange) {
                    if (oldSafari) {
                      if (iPhoneORiPod) {
                        setCopyBtnText(
                          afterCopyText.iPhoneOriPod
                        );
                      } else if (iPad) {
                        // The iPad doesn't have the 'Copy' box pop up,
                        // you have to tap the text first.
                        setCopyBtnText(
                          afterCopyText.iPad
                        );
                      } else {
                        // Just old!
                        setCopyBtnText(
                          afterCopyText.oldSafari
                        );
                      }
                    } else {
                      setCopyBtnText(
                        afterCopyText.desktop
                      );
                    }
                  }
                } catch (ignore) {
                  setCopyBtnText(
                    afterCopyText.notSupported
                  );
                }
                originalCopyItem.focus();
                // Restore the user's original position to avoid
                // 'jumping' when they click a copy button.
                window.scrollTo(
                  oldPosX,
                  oldPosY
                );
                originalCopyItem.selectionStart = 0;
                originalCopyItem.selectionEnd = copyValue.length;
                copyItem.remove();
              } else {
                throwErr(
                  "You don't have an element with the class: '" +
                  textClassName +
                  "'. Please check the cheval README."
                );
              }
            });
          } else {
            throwErr(
              "You don't have a <button> with the class: '" +
              buttonClassName +
              "'. Please check the cheval README."
            );
          }
        };

        // Copy all sets of elements and buttons:
        matches.forEach(function(i) {
          return cheval(
            "." + buttonClassName + i,
            "." + textClassName + i
          );
        });

      });

    }());
    // @license-end
  </script>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

作为我理解代码的票价。您可以在之前添加(在第179行)

copyItem.value = copyValue;

代码

copyValue += "Copyright by foo bar";