<div>
<div class="form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Text to be copied to clipboard!</label>
<input type="text" class="to-copy form-control" id="exampleInputEmail1">
</div>
<fieldset>
<button class="btn btn-raised btn-primary write-btn">Copy to clipboard</button>
<button class=" btn btn-raised btn-info read-btn">Paste from clipboard</button>
</fieldset>
<div>
<h3 class="clipboard-results"></h3>body {
padding: 20px;
}
const readBtn = document.querySelector('.read-btn');
const writeBtn = document.querySelector('.write-btn');
const resultsEl = document.querySelector('.clipboard-results');
const inputEl = document.querySelector('.to-copy');
readBtn.addEventListener('click', () => {
navigator.clipboard.readText()
.then(text => {
resultsEl.innerText = text;
})
.catch(err => {
console.log('Something went wrong', err);
})
});
writeBtn.addEventListener('click', () => {
const inputValue = inputEl.value.trim();
if (inputValue) {
navigator.clipboard.writeText(inputValue)
.then(() => {
inputEl.value = '';
if (writeBtn.innerText !== 'Copied!') {
const originalText = writeBtn.innerText;
writeBtn.innerText = 'Copied!';
setTimeout(() => {
writeBtn.innerText = originalText;
}, 1500);
}
})
.catch(err => {
console.log('Something went wrong', err);
})
}
});
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.