[英]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/
使用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>
您需要将侦听器放在输入本身上,在这种情况下,将其附加到onKeyDown
事件:
$('input').on("keydown", function() {
send.value = "Change";
});
需要最少更改的解决方案是使用keyup
事件。 即
$('#test').keyup(function() {
send.value = "Change";
});
这样,在#test
父级中输入任何输入字段都会触发该事件。
$('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.