文章/答案/技术大牛

发布

社区首页 >问答首页 >设置按下按钮时文本区域内的插入点

问设置按下按钮时文本区域内的插入点
EN

Stack Overflow用户

提问于 2021-05-24 10:27:49

回答 1查看 59关注 0票数 1

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

我希望插入点在按下按钮后从第三行开始，这样用户就可以开始键入纯文本，而不必在文本区内单击。顺风正被用于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;
}

javascript

html

tailwind-css

回答 1

Stack Overflow用户

发布于 2021-05-24 11:30:31

这样如何：

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上的语法

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67666014

复制

相似问题

问设置按下按钮时文本区域内的插入点
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置按下按钮时文本区域内的插入点EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置按下按钮时文本区域内的插入点
EN