如何将文本追加到HTML输入表单？

Question

如何将文本追加到HTML输入表单？

6

我已经创建了一个基本的HTML输入表单，但想要在用户输入的文本后面添加一些文本，这该怎么做呢？

<form action="https://api.hipchat.com/v1/rooms/message" method="get" target="">
  <input type="hidden" name="room_id" value="example">
  <input type="hidden" name="from" value="example">
  <input type="hidden" name="color" value="example">
  <input type="hidden" name="notify" value="example">
  <input type="hidden" name="auth_token" value="example">

  Message: <input type="text" name="message"><br>
  <input type="submit" value="Submit">
</form>

我希望从用户那里获取一些输入，然后将其发布到HipChat房间。所有这些都可以正常工作。但我想在消息之前添加"@Lewis"，以便在HipChat上收到提及。是否可以像这样做：

value="@Lewis" + "Submit"

谢谢！

- Lewis Lebentz

你用什么来提交表单？你需要使用它来追加数据。 - codedude

我只是使用一个基本的HTML页面和一个按钮。这就是你的意思吗？@codedude - Lewis Lebentz

仅使用HTML会很困难。您可以使用隐藏字段，但需要在接收端进行解析。另一个选择是JavaScript。 - Mackan

2个回答

1

你可以使用JavaScript实现此操作。添加一个提交处理程序，并在消息开头添加所需的文本。以下是使用jQuery的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   </script>
<script>
  $(function() {
    $('form').submit(function() {
      var $m = $(this).find('[name=message]');
      $m.val('@Lewis ' + $m.val();
    });
  });
</script>

- Koen Peters

谢谢你的回答。我是初学者，如何添加提交处理程序？我该如何将jQuery整合到表单中？ - Lewis Lebentz

你只需要做的就是引入jQuery库并将上面的代码放在script标签中即可。就这样。我已经调整了代码，所以你可以将其复制粘贴到你的页面中。 - Koen Peters

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mackan · Accepted Answer

不需要为此请求添加jQuery。一小段JavaScript代码就可以很好地完成，并且更加轻量级。但是，如果您计划使用大量JavaScript，您可能需要开始了解jQuery。

<form id="myForm" action="https://api.hipchat.com/v1/rooms/message" method="get" target="">
  <input type="hidden" name="room_id" value="example">
  <input type="hidden" name="from" value="example">
  <input type="hidden" name="color" value="example">
  <input type="hidden" name="notify" value="example">
  <input type="hidden" name="auth_token" value="example">Message:
  <input type="text" name="message" id="myMessage">
  <br>
  <input type="submit" value="Submit">
</form>

<script type="text/javascript">
  window.onload = function() {
    document.getElementById("myForm").onsubmit = function() {
      var msgElement = document.getElementById("myMessage");
      msgElement.value = '@Lewis: ' + msgElement.value;
      alert(msgElement.value); //comment/remove this line
      return true;
    };
  };
</script>

请注意，我在表单和消息元素中添加了id。