I am trying to write code for a simple note taker app for work, but struggling with code to copy all fields to clipboard.
<!DOCTYPE html>
<html>
<body>
<h1>NOTEPAD 1.0</h2>
<form>
<div class="notes">
<form id="form1">
<label for="name"><b>Name:</b></label><br>
<input type="text" id="name" name="name"><br>
<label for="AR"><b>AR#:</b></label><br>
<input type="text" id="AR" name="AR"><br>
<label for="Verified"><b>Verified:</b></label><br>
<input type="text" id="Verified" name="Verified"><br>
<label for="Reason"><b>Reason:</b></label><br>
<input type="text" id="Reason" name="Reason"><br>
<label for="Resolution"><b>Resolution:</b></label><br>
<div>
<textarea style="width:700px; height: 200px;"></textarea></div>
<script>
let name = document.getElementById(name).value
let nameLabel = "Name:\t"
let ARLabel = "AR#:\t"
let copyString = nameLabel.concat(name, '\n', ARLabel, "AR");
</script>
<button onclick="navigator.clipboard.writeText(copyString)">Copy</button>
<input type="reset">
<p>
I want the copy output to display as
Name: AR#: Verified: Reason: Resolution:
<!DOCTYPE html>
<html>
<head>
<input type="text" value="Hello Text Copied" id="myInput">
<button onclick="copyText()">Copy text</button>
<script>
function copyText () {
var TextCopy = document.getElementById("myInput");
navigator.clipboard.writeText(TextCopy.value);
alert("Copied the text: " + TextCopy.value);
}
</script>
</body>
</html>
With navigator.clipboard you can read and write from/to clipboard.
If you want to copy a selected portion of text, you can do that with window.getSelection().toString() .
Note: check if the selection is not .isCollapsed // meaning selection.end === selection.begin
You can customize how you want your selection to be parsed into a string by working with the Selection object