Копирование текста по клику

Discussion in 'PHP' started by GAiN, 14 Apr 2012.

  1. GAiN

    GAiN Elder - Старейшина

    Joined:
    2 Apr 2011
    Messages:
    2,531
    Likes Received:
    166
    Reputations:
    99
    Сделал по примеру копирование текста в буфер, но для моего случая не работает как надо.
    у меня таблица, где данные из базы данных выводятся в таблицу, и копируется в буфер по клику только первая строка таблицы, кликнув на остальные идёт перезагрузка страницы.
    сделал по этому примеру:
    http://shublog.ru/javascript/kak-skopirovat-tekst-v-bufer-po-nazhatiyu-knopki-zeroclipboard/
    применил к такой секции:
    PHP:
        echo '<tr><td><h4 style="text-shadow:black 0px 0px 0px"><div id="text">'.$username.'</div></h4><div id="copyButtonСontainer"><button id="copyButton">Копировать</button></div></td><td><input type="radio" name="admin[]" value="'.$id.'" /></td></tr>'."\n";
    копирует текст из '.$username.'

    скрипт копирования:
    PHP:
    <script type="text/javascript" src="http://shublog.ru/examples/2011.03.24-zeroclipboard/ZeroClipboard.js"></script> 
    <style type="text/css"> 
    li, button {
        margin-bottom: 10px;
    }
    #text {
        border: 1px dotted #000;
        padding: 0 10px 10px 10px;
        width: 700px;
        margin-bottom: 10px;
    }
     
    #copyButton {
        text-align: center; 
        border: 2px solid #ff9900;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: #fff; 
        padding: 5px 10px; 
    }
    #copyButton.hover {
        background: #eee;
    }
    #copyButton.active {
        background: #ff9900;
    }
    </style> 
    </head> 
     
    <body> 
        
        <div id="text"><p>Этот текст со всеми</p> <p>тегами</p> <span style="display:none">ShuBlog.ru</span> будет скопирован из этого контейнера по нажатию кнопки</div> 
        
        <div id="copyButtonСontainer"> 
            <button id="copyButton">Копировать</button> 
        </div> 
     
     
     
    <script type="text/javascript"> 
        var clip = new ZeroClipboard.Client(); 
        clip.setText(''); 
        clip.addEventListener( 'complete', function(client, text) { 
            alert("Текст скопирован в буфер"); 
        });
        
        clip.addEventListener( 'mouseDown', function(client) {  
            clip.setText( document.getElementById('text').innerHTML ); 
        });
     
        clip.glue('copyButton','copyButtonСontainer'); 
    </script>
    как сделать чтобы копировались данные из строк таблицы?


    ещё вот что заметил, когда в примере сделал 3 тексовых поля для копирования, то копируется только первая кнопка, другие не работают:
    как исправить этот баг ?
    PHP:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    title>Копирование в буфер ZeroClopboardПример статьи с сайта ShuBlog.ru</title>
    <
    script type="text/javascript" src="ZeroClipboard.js"></script> 
    <style type="text/css">
    li, button {
        margin-bottom: 10px;
    }
    #text {
        border: 1px dotted #000;
        padding: 0 10px 10px 10px;
        width: 700px;
        margin-bottom: 10px;
    }

    #copyButton {
        text-align: center; 
        border: 2px solid #ff9900;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: #fff; 
        padding: 5px 10px; 
    }
    #copyButton.hover {
        background: #eee;
    }
    #copyButton.active {
        background: #ff9900;
    }
    </style>
    </head>

    <body>
        
        <div id="text"><p>Этот текст со всеми</p> <p>тегами</p> <span style="display:none">ShuBlog.ru</span> будет скопирован из этого контейнера по нажатию кнопки</div>
        
        <div id="copyButtonСontainer">
            <button id="copyButton">Копировать</button>
        </div>

        <div id="text"><p>Этот текст со всеми</p> <p>тегами</p> <span style="display:none">ShuBlog.ru</span> будет скопирован из этого контейнера по нажатию кнопки</div>
        
        <div id="copyButtonСontainer">
            <button id="copyButton">Копировать</button>
        </div>

        <div id="text"><p>Этот текст со всеми</p> <p>тегами</p> <span style="display:none">ShuBlog.ru</span> будет скопирован из этого контейнера по нажатию кнопки</div>
        
        <div id="copyButtonСontainer">
            <button id="copyButton">Копировать</button>
        </div>

        <div id="text"><p>Этот текст со всеми</p> <p>тегами</p> <span style="display:none">ShuBlog.ru</span> будет скопирован из этого контейнера по нажатию кнопки</div>
        
        <div id="copyButtonСontainer">
            <button id="copyButton">Копировать</button>
        </div>


    <script type="text/javascript"> 
        var clip = new ZeroClipboard.Client(); 
        clip.setText(''); 
        clip.addEventListener( 'complete', function(client, text) { 
            alert("Текст скопирован в буфер"); 
        });
        
        clip.addEventListener( 'mouseDown', function(client) {  
            clip.setText( document.getElementById('text').innerHTML ); 
        });

        clip.glue('copyButton','copyButtonСontainer'); 
    </script> 

    </body>
    </html>
     
    #1 GAiN, 14 Apr 2012
    Last edited: 14 Apr 2012
  2. barnaki

    barnaki Elder - Старейшина

    Joined:
    2 Nov 2008
    Messages:
    676
    Likes Received:
    130
    Reputations:
    4
    код не читал . но по задаче если правильно понял. делал бы так на jquery
    Code:
    $(function() {
    $("td").bind("click",function(){
    var text = $(this).text();
    //выводим оно уже в буфере
    alert(text);
    
    });
    });
    если надо несколько строк . то заведите глобальный массив и push их туда что то типа
    Code:
    var database = array();
    $(function() {
    $("td").bind("click",function(){
    var text = $(this).text();
    database.push(text);
    //выводим оно уже в буфере
    alert(text);
    
    });
    });
    так же можно вместо глобальной переменной сохранять все в видимый или невидимый блок на странице
    <div id="database"></div>
    Code:
    $(function() {
    $("td").bind("click",function(){
    var text = $(this).text();
    $("#database").append(text);
    //выводим оно уже в буфере
    alert(text);
    
    });
    });
    изучите jqeury . он имба. голый javascript прошлый век
     
    #2 barnaki, 19 Apr 2012
    Last edited: 20 Apr 2012
  3. GAiN

    GAiN Elder - Старейшина

    Joined:
    2 Apr 2011
    Messages:
    2,531
    Likes Received:
    166
    Reputations:
    99
    чистый js и jquery могут быть заблокированны некоторыми браузерами, будет не стабильно на них работать
     
    #3 GAiN, 23 Apr 2012
    Last edited: 23 Apr 2012
  4. GAiN

    GAiN Elder - Старейшина

    Joined:
    2 Apr 2011
    Messages:
    2,531
    Likes Received:
    166
    Reputations:
    99
    вот неплохой пример, здесь всё динамично, jquery + flash, работает везде
    http://www.steamdev.com/zclip/
    но для таблицы не подходит, копируется только одно значение первой строки
     
  5. barnaki

    barnaki Elder - Старейшина

    Joined:
    2 Nov 2008
    Messages:
    676
    Likes Received:
    130
    Reputations:
    4
    некоторые до сих пор сидят на win 98 а некоторые используют ie6. давайте теперь будем жертвовать css3 из за них