如何在输入字段中输入文本之前禁用提交按钮？

Question

我有一个问题试图实现这个结果,我需要的几乎是禁用提交按钮,直到在输入字段中输入文本.我尝试了一些功能,但没有结果.如果你可以帮我这个,那将非常感激.

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>

提前致谢.

Answer 1

解决方案的唯一问题是只有在从文本字段中删除焦点后才启用该按钮(当然在输入数据后).只要在字段中输入任何文本,就不能启用该按钮？这是一个实现这一目标的解决方案.

链接到其他解决方案:如果未输入文本,则保持禁用按钮

这样的事情:

$('.recipe-name').on("keyup", action);
function action() {
   if($('.recipe-name').val().length > 0) {
      $('#submit-name').prop("disabled", false);
   }else {
      $('#submit-name').prop("disabled", true);
   }
}

Answer 2

你可以用这个:

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");        
        }
    });    
});

在jsfiddle看到.