javascript - 如何使用输入或占位符名称复制到剪贴板？

Question

我有一个简单的表格:https://jsfiddle.net/skootsa/8j0ycvsp/6/

<div class='field'>
<input placeholder='Nickname' type='text'>
</div>
<div class='field'>
<input placeholder='Age' type='text'>
</div>

如何获得一个复制每个输入框内容+“占位符”属性(或类名)的按钮？这样剪贴板结果看起来像这样:

Nickname: Johnnyboy

Age: 22

Answer 1

您需要:

1. 创建一个不可见元素来复制数据
2. 从表单中获取数据并将其设置到前一个元素
3. 选择它
4. 调用document.execCommand('copy')将所选文本复制到剪贴板

我已经更新了你的 fiddle ，查看一下 https://jsfiddle.net/8j0ycvsp/9/

如果您想要代码

function copyToClipboard() {

    /*get inputs from form */
    var inputs = document.querySelectorAll("#the-form input[type=text]");

    /*do a copy of placeholder and contents*/
    var clipboardText = ''
    for (var i = 0, input; input = inputs[i++];) {
        clipboardText += input.placeholder+': '+(input.value ? input.value : '' )+'\n';     
    }

    /*create hidden textarea with the content and select it*/
    var clipboard = document.createElement("textarea");
    clipboard.style.height = 0;
    clipboard.style.width  = 0;
    clipboard.value = clipboardText;
    document.body.appendChild(clipboard);
    clipboard.select();

    console.log(clipboard.value);

    /*do a copy fren*/
    try {
        if(document.execCommand('copy'))
            console.log('Much succes, wow!');
        else 
            console.log('Very fail, wow!');

    } catch (err) {        
        console.log('Heckin concern, unable to copy');
    }
}