Trying to set the insertion point inside the text area once the "+header" button has been pressed. Currently, when "+header" button is pressed the text box will display the address, date, time, etc. but will not place the insertion point inside the text box.
I want the insertion point to start on the third line once the button has been pressed so a user can start typing plain text without having to click inside the text area. Tailwind is being used for CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind</title>
</head>
<body class="bg-gray-100">
<div class="container font-sans bg-white mx-auto px-4 py-4 rounded shadow-md">
<form action="" method="" class="form grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<div class="text-lg w-full underline font-bold col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4">
<h1>Notification Information</h1>
</div>
<div class="Date Received space-y-4">
<label for="Date Received" class="font-medium">Date Received:</label>
<input type="text" placeholder="Date" id="currentDate" class="w-24 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent rounded shadow-sm focus:ring-opacity-75 mx-2">
</div>
<div class="Time Received space-y-4">
<label for="Time Received" class="font-medium">Time Received:</label>
<input type="text" placeholder="Time" id="currentTime" class="w-14 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent rounded shadow-sm focus:ring-opacity-75 mx-2">
</div>
<div class="Street # space-y-4">
<label for="Street #" class="font-medium">Street #:</label>
<input type="text" id="street" placeholder="Street #" class="w-24 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent rounded shadow-sm focus:ring-opacity-75 mx-2">
</div>
<div class="Address space-y-4">
<label for="Address" class="font-medium">Address:</label>
<input type="text" id="address" placeholder="Address" class="w-24 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent rounded shadow-sm focus:ring-opacity-75 mx-2">
</div>
<div class="inline-flex w-full text-lg underline font-bold mt-4 col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4">
<h1>Media Script</h1>
<div><button type="button" id="plusScript" onclick="addText()" class="text-sm border border-transpartent border-2 border-blue-300 bg-trasparent px-1 p-1 rounded shadow text-blue-400 mx-4 font-bold">+Header</button></div>
</div>
<div class="Media Script space-y-4">
<label for="Media Script"></label>
<textarea name="Media Script" rows="5" cols="70" id="script" placeholder="Media Script Information" class="resize-none text-sm col-span-1 sm:col-span-2 md:col-span-3 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent rounded shadow-sm focus:ring-opacity-75 mx-2">
</textarea>
</div>
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var today = new Date();
var civilianToday = new Date();
var time = today.getHours() + ":" + today.getMinutes();
document.getElementById("currentTime").value = time;
var date =
today.getDate() +
"-" +
monthNames[today.getMonth()] +
"-" +
today.getFullYear();
document.getElementById("currentDate").value = date;
var oldCivilianTime = civilianToday.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit"
});
var civilianTime = oldCivilianTime.replace(/^0(?:0:0?)?/, "");
// +HEADER BUTTON
function addText() {
var address = document.getElementById("address").value;
var oldStreet = Array.from(document.getElementById("street").value);
if (oldStreet.length < 3) {
newStreet = "0-100";
} else if (oldStreet.length === 3) {
oldStreet.splice(1);
oldStreet.push(0, 0);
newStreet = oldStreet.join("");
} else if (oldStreet.length === 4) {
oldStreet.splice(2);
oldStreet.push(0, 0);
newStreet = oldStreet.join("");
} else if (oldStreet.length === 5) {
oldStreet.splice(3);
oldStreet.push(0, 0);
newStreet = oldStreet.join("");
} else {
alert("Error");
}
document.getElementById("script").value =
newStreet +
" " +
"block of" +
" " +
address +
" " +
"on" +
" " +
date +
" at approximately" +
" " +
civilianTime;
document.getElementById("script").style.textTransform = "uppercase";
document.getElementById("script").style.fontWeight = "bold";
document.getElementById("script").style.textDecoration = "underline";
}
document.getElementById("plusScript").addEventListener("click", setPosition);
function setPosition() {
var txtarea = document.getElementById("script");
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
var sel = txtarea.value.substring(start, end);
var finText =
txtarea.value.substring(0, start) + txtarea.value.substring(end);
txtarea.value = finText;
txtarea.focus();
txtarea.selectionEnd = end + 100;
}
