如果任何表单输入更改 [JS]，则更改（立即）提交按钮文本答案

【问题标题】：Change (immediatly) submit button text if any form input change [JS]如果任何表单输入更改 [JS]，则更改（立即）提交按钮文本
【发布时间】：2017-02-03 16:46:05
【问题描述】：

如果任何表单输入发生变化，我如何立即更改提交按钮文本？

//This applies to whole form
$('#test').change(function() {
  $("#send").prop("value","Change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
  <input id="Input1" value="Input1" />
  <input id="Input2" value="Input2" />
  <input type="submit" id="send" value="Send" />
</form>

这里，按钮文本在光标离开输入后发生变化。

现场示例：http://jsfiddle.net/rgg3A/56/

【问题讨论】：

也许应该改用用户keypress 事件？更改仅在模糊事件后触发。
@Clementine。你需要什么？当在输入中输入数据时需要更改提交值或单击发送时更改值？

标签： javascript jquery

【解决方案1】：

由于您最初的问题没有直接提到 JQuery，除非它被用作选择器，所以这个问题让我一直在等待正确的 JavaScript 答案。

因此，此答案与其他示例相同，但仅使用普通的 JavaScript。使用 input 事件，就像其他答案一样。

document.getElementById('test').addEventListener('input', function(e) {
  document.getElementById('send').value = e.target.value;
});

<form id="test">
  <input id="Input1" value="Input1">
  <input id="Input2" value="Input2">
  <input type="submit" id="send" value="Send">
</form>

这里的区别在于它在表单元素上监听冒泡事件，只注册一次事件监听器（而不是对多个元素应用相同的事件监听器），并使用Event.target 属性来确定哪个元素已修改。

【讨论】：

【解决方案2】：

您可以使用 jquery 输入 event 和 selector 来做到这一点。

$('input').on("keydown", function() {
      $('#send').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
    <input id="Input1" value="Input1">
    <input id="Input2" value="Input2">
    <input type="submit" id="send" value="Send">
</form>

【讨论】：

【解决方案3】：

需要最少更改的解决方案是使用keyup 事件。即

$('#test').keyup(function() {
   send.value = "Change";
});

这样，在#test 父级中的任何输入字段中键入都会触发该事件。

【讨论】：

【解决方案4】：

使用input事件
使用:input Selector，选择所有input, textarea, select and button元素

$('#test').find(':input').on('input', function() {
  document.getElementById('send').value = this.value;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="test">
  <input id="Input1" value="Input1">
  <input id="Input2" value="Input2">
  <input type="submit" id="send" value="Send">
</form>

【讨论】：

【解决方案5】：

您需要将侦听器放在输入本身上，在这种情况下将其附加到onKeyDown 事件：

$('input').on("keydown", function() {
  send.value = "Change";
});

Updated Fiddle

【讨论】：