从克隆的textarea

时间：2015-04-23 00:25:59

标签： javascript jquery html textarea

我在这里发现了一些代码，这些代码正是我现在正在使用的工具所需要的。将先前的textarea值复制到剪贴板，但它似乎不适用于克隆的textarea。需要一些帮助。

<!DOCTYPE html>
<html>
<head>    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>      
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
</head>
<body>    
    <center>
        <button id="button" onlick="duplicate()">Duplicate</button>
    </center>
        <div id="duplicater"> 
            <center>
                DUPLICATE EVERYTHING INSIDE THIS DIV
            <br>
                 <textarea id="notestocopy" name="notestocopy" rows="20" cols="20%"  style="bordercolor: #027991;"></textarea>
                 <button type="button" id="copy"  class="btn-copy">Copy</button>
                 <span class="span-message"></span>
            <br>
            </center>
        </div>
<script type='text/javascript'>//<![CDATA[     
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}
//]]>  

</script>
<script type="text/javascript">
// Function for initializing ZeroClipboard
function zcInit() {
    var client = new ZeroClipboard($('.btn-copy'));
    client.on('ready', function(event) {
        client.on('copy', function(event) {
            // `this` === `client`
            // `event.target` === the element that was clicked

            // Get the text content of <input> or <textarea> that comes immediately before the clicked button
            var $prevEle = $(event.target).prev();
            var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

            // If value of `text` is not empty, set the data to clipboard
            if (text) {
                event.clipboardData.setData('text/plain', text);
            }
        });

        client.on('aftercopy', function(event) {
            // Check if copied text is not empty
            if (event.data["text/plain"]) {
                // Call something on successful copying
                $(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
            }
        });
    });

    client.on('error', function(event) {
        ZeroClipboard.destroy();
    });
}

// Function for copying text using window.clipboardData
function addHandler_WinClipData() {
    $('.btn-copy').click(function() {
        var $prevEle = $(this).prev();
        var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

        // If value of `text` is not empty, set the data to clipboard
        if (text && window.clipboardData.setData('Text', text)) {
            // Call something on successful copying
            $(this).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
        }
    });
}

// Function for pop up a message and select text in <input> or <textarea>, in case window.Clipboard data and Flash are not available
function addHandler_AlertMsg() {
    $('.btn-copy').click(function() {
        if ($(this).prev().val()) {
            alert('No Flash installed. Please copy manually');
            $(this).prev().focus().select();
        }
    });
}

// Function for checking Flash availability
function detectFlash() {
    var hasFlash = false;
    try {
        var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if (fo) {
            hasFlash = true;
        }
    } catch (e) {
        if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] !== undefined &&
            navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
            hasFlash = true;
        }
    }
    return hasFlash;
}

var hasWinClipData = !!(window.clipboardData && clipboardData.setData),
    hasFlash = detectFlash();

if (hasWinClipData) {    // Check if window.clipboardData is available
    addHandler_WinClipData();
} else if (hasFlash) {    // Check if Flash is available
    $.ajax({
        type: "GET",
        url: '//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.min.js',
        dataType: "script",
        cache: true,
        success: zcInit,
        error: addHandler_AlertMsg
    });
} else {    // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked
    addHandler_AlertMsg();
}
</script>

</body>
</html>

有没有我错过了这样的工作？

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>


<body>

        <div> 
            <center>

            <br>
                 <textarea id="notestocopy" name="notestocopy" rows="20" cols="20%"  style="bordercolor: #027991;"></textarea>
                 <button type="button" id="copy"  class="btn-copy">Copy</button>
                 <span class="span-message"></span>
            <br>

                 <textarea id="notestocopy" name="notestocopy" rows="20" cols="20%"  style="bordercolor: #027991;"></textarea>
                 <button type="button" id="copy"  class="btn-copy">Copy</button>
                 <span class="span-message"></span>
            </center>
        </div>











<script type="text/javascript">
// Function for initializing ZeroClipboard
function zcInit() {
    var client = new ZeroClipboard($('.btn-copy'));




    client.on('ready', function(event) {
        client.on('copy', function(event) {
            // `this` === `client`
            // `event.target` === the element that was clicked

            // Get the text content of <input> or <textarea> that comes immediately before the clicked button
            var $prevEle = $(event.target).prev();
            var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

            // If value of `text` is not empty, set the data to clipboard
            if (text) {
                event.clipboardData.setData('text/plain', text);
            }
        });

        client.on('aftercopy', function(event) {
            // Check if copied text is not empty
            if (event.data["text/plain"]) {
                // Call something on successful copying
                $(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
            }
        });
    });

    client.on('error', function(event) {
        ZeroClipboard.destroy();
    });
}

// Function for copying text using window.clipboardData
function addHandler_WinClipData() {
    $('.btn-copy').click(function() {
        var $prevEle = $(this).prev();
        var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

        // If value of `text` is not empty, set the data to clipboard
        if (text && window.clipboardData.setData('Text', text)) {
            // Call something on successful copying
            $(this).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
        }
    });
}

// Function for pop up a message and select text in <input> or <textarea>, in case window.Clipboard data and Flash are not available
function addHandler_AlertMsg() {
    $('.btn-copy').click(function() {
        if ($(this).prev().val()) {
            alert('No Flash installed. Please copy manually');
            $(this).prev().focus().select();
        }
    });
}

// Function for checking Flash availability
function detectFlash() {
    var hasFlash = false;
    try {
        var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if (fo) {
            hasFlash = true;
        }
    } catch (e) {
        if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] !== undefined &&
            navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
            hasFlash = true;
        }
    }
    return hasFlash;
}

var hasWinClipData = !!(window.clipboardData && clipboardData.setData),
    hasFlash = detectFlash();

if (hasWinClipData) {    // Check if window.clipboardData is available
    addHandler_WinClipData();
} else if (hasFlash) {    // Check if Flash is available
    $.ajax({
        type: "GET",
        url: '//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.min.js',
        dataType: "script",
        cache: true,
        success: zcInit,
        error: addHandler_AlertMsg
    });
} else {    // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked
    addHandler_AlertMsg();
}
</script>

</body>
</html>

编辑： 我尝试单独克隆对象并手动设置按钮的类但它仍然无效.. 

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>


<body>



        <div> 
            <center>
                 <input type="button" id="add" value="Add" onclick="add()";/>
                 <br>
                 <textarea id="notestocopy" name="notestocopy" rows="20" cols="20%"  style="bordercolor: #027991;"></textarea>
                 <button type="button" id="copy"  class="btn-copy">Copy</button>
                 <span class="span-message"></span>
            </center>
        </div>


<div id="container" align="center">
</div>

<script type="text/javascript">
    function add(){
            var notestocopyadd = $("#notestocopy").clone();
            var copyadd = $("#copy").clone();

            copyadd.attr("class", "btn-copy");

            $("#container").append(notestocopyadd);
            $("#container").append(copyadd);
            $("#container").append("<br/>");
         }
</script>





<script type="text/javascript">
// Function for initializing ZeroClipboard
function zcInit() {
    var client = new ZeroClipboard($('.btn-copy'));




    client.on('ready', function(event) {
        client.on('copy', function(event) {
            // `this` === `client`
            // `event.target` === the element that was clicked

            // Get the text content of <input> or <textarea> that comes immediately before the clicked button
            var $prevEle = $(event.target).prev();
            var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

            // If value of `text` is not empty, set the data to clipboard
            if (text) {
                event.clipboardData.setData('text/plain', text);
            }
        });

        client.on('aftercopy', function(event) {
            // Check if copied text is not empty
            if (event.data["text/plain"]) {
                // Call something on successful copying
                $(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
            }
        });
    });

    client.on('error', function(event) {
        ZeroClipboard.destroy();
    });
}

// Function for copying text using window.clipboardData
function addHandler_WinClipData() {
    $('.btn-copy').click(function() {
        var $prevEle = $(this).prev();
        var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

        // If value of `text` is not empty, set the data to clipboard
        if (text && window.clipboardData.setData('Text', text)) {
            // Call something on successful copying
            $(this).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
        }
    });
}

// Function for pop up a message and select text in <input> or <textarea>, in case window.Clipboard data and Flash are not available
function addHandler_AlertMsg() {
    $('.btn-copy').click(function() {
        if ($(this).prev().val()) {
            alert('No Flash installed. Please copy manually');
            $(this).prev().focus().select();
        }
    });
}

// Function for checking Flash availability
function detectFlash() {
    var hasFlash = false;
    try {
        var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if (fo) {
            hasFlash = true;
        }
    } catch (e) {
        if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] !== undefined &&
            navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
            hasFlash = true;
        }
    }
    return hasFlash;
}

var hasWinClipData = !!(window.clipboardData && clipboardData.setData),
    hasFlash = detectFlash();

if (hasWinClipData) {    // Check if window.clipboardData is available
    addHandler_WinClipData();
} else if (hasFlash) {    // Check if Flash is available
    $.ajax({
        type: "GET",
        url: '//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.min.js',
        dataType: "script",
        cache: true,
        success: zcInit,
        error: addHandler_AlertMsg
    });
} else {    // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked
    addHandler_AlertMsg();
}
</script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

我能够通过修复你编写的错误

来让你的代码在IE中运行

function duplicate() { var clone = original.cloneNode(true); // "deep" clone clone.id = "duplicetor" + ++i; // there can only be one element with an ID original.parentNode.appendChild(clone); }

修复＆＃34; duplicetor＆＃34;复制者，这是id的名称。

相关问题
最新问题