Currently I am working on a small project, which will first ask a user for their name.
Once inputted by user, they will press submit which will fill the text area with the greeting('Hi there, '+ name).
At present the input is accepted and the text area is populated after you press submit however, the button I have within the text area to copy the text to the clipboard disappears after the text area is populated with said greeting. (You will see the blue button in the bottom text area below the user input - this disappears after pressing submit).
Ideally this blue button should allow the user to copy and paste all the text produced in the text area.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Effects - addClass demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body>
<form>
<div>Your name:</div>
<input name="enterName" id="enterName" type="text">
<div style="margin-top:10px;" class="submit">
<input value="submit" id="submit_this" type="button">
</div>
</form>
<br>
<div class="copy-text" id="result">
<button><i class="fa fa-clone"></i></button>
<script>
$(document).ready(function() {
var greeting = function(name) {
var name = $('#enterName').val();
name = 'Hi there,' + ' ' + name;
console.log('Hi there,' + '' + name);
$('#result').text(name);
};
$('#submit_this').click(function() {
greeting();
//prompt('Hi there,' + '' + name);
});
});
</script>
</div>
</body>
</html>
JS:
let copyText = document.querySelector(".copy-text");
copyText.querySelector("button").addEventListener("click", function () {
let input = copyText.querySelector("input.text");
input.select();
document.execCommand("copy");
copyText.classList.add("active");
window.getSelection().removeAllRanges();
setTimeout(function () {
copyText.classList.remove("active");
}, 2500);
});
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background: #F7EDE2;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.label {
padding: 10px;
font-size: 18px;
color: #111;
}
.copy-text {
position: relative;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
display: flex;
}
.copy-text input.text {
padding: 10px;
font-size: 18px;
color: #555;
border: none;
outline: none;
}
.copy-text button {
padding: 10px;
background: #5784f5;
color: #fff;
font-size: 18px;
border: none;
outline: none;
border-radius: 10px;
cursor: pointer;
}
.copy-text button:active {
background: #809ce2;
}
.copy-text button:before {
content: "Copied";
position: absolute;
top: -45px;
right: 0px;
background: #5c81dc;
padding: 8px 10px;
border-radius: 20px;
font-size: 15px;
display: none;
}
.copy-text button:after {
content: "";
position: absolute;
top: -20px;
right: 25px;
width: 10px;
height: 10px;
background: #5c81dc;
transform: rotate(45deg);
display: none;
}
.copy-text.active button:before,
.copy-text.active button:after {
display: block;
}
footer {
position: fixed;
height: 50px;
width: 100%;
left: 0;
bottom: 0;
background-color: #5784f5;
color: white;
text-align: center;
}
footer p {
margin: revert;
padding: revert;
}
Any pointers/tips would be much appreciated as I have been looking at this for some time now, and haven't been able to find anything to help just yet.
Thank you in advance!
D
