How Do I Copy To Clipboard With The Input Or Placeholder Name?
I have a simple form: https://jsfiddle.net/skootsa/8j0ycvsp/6/
<
Solution 1:
You need to:
- create an invisible element to copy the data
- get the data from your form and set it to the previous element
- select it
- call
document.execCommand('copy')to copy the selected text to the clipboard
I have updated your fiddle, check it out https://jsfiddle.net/8j0ycvsp/9/
In case you want the code
functioncopyToClipboard() {
/*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!');
elseconsole.log('Very fail, wow!');
} catch (err) {
console.log('Heckin concern, unable to copy');
}
}
Solution 2:
So give it a try
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;
});
Post a Comment for "How Do I Copy To Clipboard With The Input Or Placeholder Name?"