Javascript 在输入字段中输入文本之前，如何禁用提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3742050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable the submit button until text is entered in the input field?
提问by Ozzy
I have an issue try to achieve this result, pretty much what I need is to disable the submit button until text is entered in the input field. I've trying some functions but without results. Please if you can help me with this it would be really appreciated.
我有一个问题试图实现这个结果，我需要的是禁用提交按钮，直到在输入字段中输入文本。我尝试了一些功能，但没有结果。如果你能帮我解决这个问题，我将不胜感激。
HTML Markup
HTML 标记
<form action="" method="get" id="recipename">
<input type="text" id="name" name="name" class="recipe-name"
value="Have a good name for it? Enter Here"
onfocus="if (this.value == 'Have a good name for it? Enter Here') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Have a good name for it? Enter Here';}"
/>
<input type="submit" class="submit-name" value="" />
</form>
Thanks, in advance.
提前致谢。
采纳答案by Topera
You can use this:
你可以使用这个：
var initVal = "Have a good name for it? Enter Here";
$(document).ready(function(){
$(".submit-name").attr("disabled", "true");
$(".recipe-name").blur(function(){
if ($(this).val() != initVal && $(this).val() != "") {
$(".submit-name").removeAttr("disabled");
} else {
$(".submit-name").attr("disabled", "true");
}
});
});
See in jsfiddle.
请参阅jsfiddle。
回答by evanill80
The only problem with the accpeted solution is that the button is enabled only after focus is removed from the text field (after entering data in it of course). Shouldnt the button be enabled as soon as any text is entered in the field? Here is a solution that implements this.
接受的解决方案的唯一问题是只有在从文本字段中移除焦点后（当然是在其中输入数据之后）才启用按钮。是否应该在字段中输入任何文本后立即启用按钮？这是实现这一点的解决方案。
Link to other solution: Keep button disabled if text is not entered
链接到其他解决方案：如果未输入文本，请禁用按钮
something like this:
像这样：
$('.recipe-name').on("keyup", action);
function action() {
if($('.recipe-name').val().length > 0) {
$('#submit-name').prop("disabled", false);
}else {
$('#submit-name').prop("disabled", true);
}
}
回答by Sandy
call some javascript function like below(giving example for jquery) in onkeyup event
在 onkeyup 事件中调用一些像下面这样的 javascript 函数（以 jquery 为例）
function handleSubmit()
{
if($.trim($('#name').val() == ''))
{
$('.submit-name').attr('disabled','disabled');
}
else
{
$('.submit-name').attr('disabled','');
}
}
回答by ?ime Vidas
$("#textField").keyup(function() {
var $submit = $(this).next(); // or $("#submitButton");
if(this.value.length > 0 && this.value != "Default value") {
$submit.attr("disabled", false);
} else {
$submit.attr("disabled", true);
}
});
回答by xil3
You could try this:
你可以试试这个：
var nameText = $("#name");
nameText.attr("disabled", "disabled");
nameText.change(function () {
if(nameText.val().length > 0) {
nameText.attr("disabled", "");
} else {
nameText.attr("disabled", "disabled");
}
});
回答by dnxit
const controls = document.querySelectorAll("input, select");
for (const c of controls){
c.oldValue = c.value + c.checked;
}
var trackControls;
(trackControls = function() {
var disabled = true;
for (const c of controls) {
if (c.oldValue !== (c.value + c.checked)) {
disabled = false;
break;
}
}
var selector = document.querySelector("[type=submit]");
if (selector != null) {
selector.disabled = disabled;
}
})();
document.oninput = trackControls;
document.onchange = trackControls;
If you're not concerned about the cross browser compatibility. const does not work in IE
如果您不关心跨浏览器的兼容性。const 在 IE 中不起作用
