繁体   English   中英

如果任何表单输入发生更改,请立即更改(提交)按钮文本[JS]

[英]Change (immediatly) submit button text if any form input change [JS]

如果任何表单输入发生更改,如何立即更改提交按钮文本?

 //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/

 $('#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> 

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

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

更新小提琴

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

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

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

您可以使用jquery输入eventselector

 $('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> 

由于您最初的问题没有直接提及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> 

此处的区别在于,它正在侦听form元素上的冒泡事件,仅注册一次事件监听器(而不是将同一事件监听器应用于多个元素),并使用Event.target属性确定修改了哪个元素。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM