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

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 。

Answer 3

在 onkeyup 事件中调用一些像下面这样的 javascript 函数（以 jquery 为例）

function handleSubmit()
{
if($.trim($('#name').val() == ''))
{
$('.submit-name').attr('disabled','disabled');
}
else
{
$('.submit-name').attr('disabled','');
}
}

Answer 4

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

Answer 5

你可以试试这个：

var nameText = $("#name");

nameText.attr("disabled", "disabled");

nameText.change(function () {
  if(nameText.val().length > 0) {
    nameText.attr("disabled", "");
  } else {
    nameText.attr("disabled", "disabled");
  }

});

Answer 6

    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;

如果您不关心跨浏览器的兼容性。 const 在 IE 中不起作用