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>

我如何获得一个复制每个输入框内容的按钮+＆＃34;占位符＆＃34;属性（或类名）？因此剪贴板结果如下所示：

昵称：Johnnyboy

年龄：22

Answer 1

试试看

＆＃13;

var input = document.querySelectorAll('.field input');

document.getElementById('submit').addEventListener('click', function () {
	var innerHTMLText = "";
	for (var i = 0; i < input.length; i++) {
		innerHTMLText += input[i].placeholder + ':' + input[i].value + '      ';
	}
	console.log(innerHTMLText);
	document.getElementsByClassName('bix')[0].innerHTML = innerHTMLText;
});

＆＃13;

Answer 2

你需要：

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

我已更新您的小提琴，请查看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');
    }
}

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

2 个答案: