Question

我想要一个输入框，客户端可以在其中粘贴信息。然后，自动粘贴在框中的信息将被绑定/输入到正确的表单字段中，以便客户可以查看内容并在发送表单之前对其进行编辑。如何获取粘贴的内容并将其绑定到输入字段？

要粘贴到输入框中的内容将始终具有以下格式：

序列号：设备：责任：电子邮件责任：下一服务：购买：

1234567890 Mac计算机测试Testson test.testson@example.com 2020-05-17 2019-05-17

因此，具有类别的第一行和具有实际内容的第二行将被填写在表单的输入字段中。来自“ textarea”的内容将绑定到正确的输入字段。

<h2>Service form</h2>

<textarea rows = "2" cols = "60" name = "import field">
Paste content here
     </textarea><br>

<form action="/action_page.php">

  Name:<br>
  <input type="text" name="firstname">
  <br>

  E-mail:<br>
  <input type="text" name="lastname">
  <br>

    Serial number:<br>
  <input type="text" name="lastname">
  <br>

    Equipment:<br>
  <input type="text" name="lastname">
  <br>  

  Next service:<br>
  <input type="text" name="lastname">
  <br>

    Bought:<br>
  <input type="text" name="lastname">
  <br><br>

  <input type="submit" value="Submit">
</form>

Answer 1

因此，基本上，我们在这里所做的是，从文本区域值中删除换行符\n。然后，我们根据最后一次出现的:将字符串拆分为字段名称和值，然后再按字符:和;将字段和值字符串拆分为数组，最后给出表单输入字段id与仅包含space和-的文本相同，我们将值分配给字段

function arrange(){
  var data = document.getElementById("Data").value.replace("\n", "");

  var fieldPart = data.substr(0, data.lastIndexOf(":") +1).split(":");
  var valuePart = data.substr(data.lastIndexOf(":") +1, data.length).split(";");

  fieldPart.pop();
  valuePart.pop();

  for(var i = 0; i < fieldPart.length; i++){
    document.getElementById(fieldPart[i].replace(/ /g, "").replace(/-/g, "")).value = valuePart[i].trim();
  }
}

textarea{
  width: 700px;
  height: 40px;
}

<h2>Service form</h2>

<textarea id="Data" rows = "2" cols = "60" name = "import field" palceholder="Paste content here">

</textarea><br>
<button onclick="arrange()">Arrange</button>
<form action="/action_page.php">

  Name:<br>
  <input type="text" name="firstname" id="Liable">
  <br>

  E-mail:<br>
  <input type="text" name="lastname" id="Emailliable">
  <br>

    Serial number:<br>
  <input type="text" name="lastname" id="Serialnumber">
  <br>

    Equipment:<br>
  <input type="text" name="lastname" id="Equipment">
  <br>  

  Next service:<br>
  <input type="text" name="lastname" id="Nextservice">
  <br>

    Bought:<br>
  <input type="text" name="lastname" id="Bought">
  <br><br>

  <input type="submit" value="Submit">
</form>

粘贴在文本字段中并绑定到表单字段

1 个答案: