Support » Theme: Sydney » Add a “copy to clipboard” to a text box

  • Resolved jefnwk

    (@jefnwk)


    Hello!

    I have developed a simple page that contains a JS stopwatch and a text box written in HTML. The box is styled in CSS.

    People have been asking me to add either a “download” function or a “copy to clipboard” option to the text box.

    I have been struggling to find a solution, though I believe “copy to clipboard” is the better solution.

    Here is the link to the page: http://boost-ling.com/boosted-journal/

    I would greatly appreciate any tips on the subject.

    Thank you.

Viewing 1 replies (of 1 total)
  • Thread Starter jefnwk

    (@jefnwk)

    SOLVED using the following JS.

    <script type=”text/javascript”>

    function saveTextAsFile()
    {
    var textToSave = document.getElementById(“inputTextToSave”).value;
    var textToSaveAsBlob = new Blob([textToSave], {type:”text/plain”});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById(“inputFileNameToSaveAs”).value;

    var downloadLink = document.createElement(“a”);
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = “Download File”;
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = “none”;
    document.body.appendChild(downloadLink);

    downloadLink.click();
    }

    function destroyClickedElement(event)
    {
    document.body.removeChild(event.target);
    }

    function loadFileAsText()
    {
    var fileToLoad = document.getElementById(“fileToLoad”).files[0];

    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent)
    {
    var textFromFileLoaded = fileLoadedEvent.target.result;
    document.getElementById(“inputTextToSave”).value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, “UTF-8”);
    }

    </script>

Viewing 1 replies (of 1 total)
  • The topic ‘Add a “copy to clipboard” to a text box’ is closed to new replies.