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

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

链接到其他解决方案：Keep button disabled if text is not entered

类似的东西：

$('.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中不起作用

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

6 个答案: