按下按钮时将插入点设置在文本区域内答案

【问题标题】：Set the insertion point inside of the text area when button is pressed按下按钮时将插入点设置在文本区域内
【发布时间】：2021-05-24 02:27:48
【问题描述】：

按下“+header”按钮后，尝试在文本区域内设置插入点。目前，当按下“+header”按钮时，文本框会显示地址、日期、时间等，但不会将插入点放在文本框内。

一旦按下按钮，我希望插入点从第三行开始，这样用户就可以开始输入纯文本，而无需在文本区域内单击。 Tailwind 正在用于 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;
}

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/34968174/…
谢谢。我现在可以在文本区域内获得插入点，但不知道如何在第三行获得它。
这听起来很愚蠢，但您不应该在使用函数之前放置函数吗？前面一行就是我的意思
@StudentUser1625 好问题。见Function declaration hoisting 和Hoisting。

标签： javascript html tailwind-css

【解决方案1】：

这个怎么样：

button.addEventListener('click',()=>{
    let position=textarea.value.search(/(?<=(.*?\n){3})./);
    textarea.setSelectionRange(position,position);
    textarea.setRangeText('text to be inserted\n');
});

它使用正则表达式在第三个'\n'换行符之后搜索前导字符；调用 setSelectionRange 来设置光标位置。

查看语法 https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

【讨论】：