vendredi 2 septembre 2016

How to copy to clipboard generated text? [duplicate]

This question already has an answer here:

I created a random text generator, which is working totally fine, and I'm looking for a way for the user to share or save the generated text. Ideally, I'd have a "copy to clipboard" button, or a "share to twitter" button of the generated text itself, NOT pre-inputted text, which is the only solution I've seen so far.

Here is my generator code:

<script src="http://ift.tt/1yCEpkO"></script>
<script type="text/javascript">
    $(document).ready(function() {

        var evil = [...];

        var eviladj = [...];

        var creepemoji = [...];

        // This is a very common randomizing function.
        // It takes a list (array) and returns one at random.
        function select_random(x){
            y = x[Math.floor(Math.random()*x.length)];
            return y;
        }

        function generate(){

            // Select a random item from each list
            var selected_evil = select_random(evil);
            var selected_eviladj = select_random(eviladj);
            var selected_creepemoji = select_random(creepemoji);

            // Take the selected (random) item from list and make it visible
            $('.list-evil').html(selected_evil);
            $('.list-eviladj').html(selected_eviladj);
            $('.list-creepemoji').html(selected_creepemoji);

        }

        $('button').click(function(){
            generate();
        });

        generate();

    });

</script>

And here is the HTML and CSS for the buttons I'd like to use:

<div class="button-container">
    <button class="button">REGENERATE</button>>
</div>

<div class="button-container-copy">
    <button class="button">COPY TO CLIPBOARD</button>
</div>

        <span class="list-evil"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="list-eviladj"></span>&nbsp;
        <span class="list-creepemoji"></span>

    <style>
    .button-container {
    position: fixed;
    margin: 43% 0 0 0;
    float: left;
    display: inline;
        }

.button-container-copy {
    position: fixed;
    margin: 43% 0 0 70%;
    float: right;
    display: inline;
        }

.button {
    font-family: 'Fugaz One', cursive;
    font-size: 1.5em;
    padding: 10px 20px;
    background-color: #58FCEC;
    color: deepskyblue;
    border-radius: 10px;
    transition-timing-function: linear;
    transition-duration:.25s;
        }

.button:hover {
    background-color: deepskyblue;
    color: #58FCEC;
    transition-timing-function: linear;
    transition-duration: .05s;
        }
    </style>

If anybody has alternative suggestions for sharing/saving generated phrases, let me know — I literally started learning about javascript today, so I may be missing something obvious!




Aucun commentaire:

Enregistrer un commentaire