当用户点击输入字段时，我正在尝试禁用表单提交按钮答案

【问题标题】：I'm trying to make the form submit button be disabled when the user clicks out of the input field当用户点击输入字段时，我正在尝试禁用表单提交按钮
【发布时间】：2021-04-29 20:04:47
【问题描述】：

<html>   
 <form class="form-disable">
            <br>
            <input type="text" id="message2">
            <br>
            <button id="myButton" type="submit" onclick="text()"disabled>Generate Text</button>
    </form>
</html>
    
<script>
    // $("html").click(function(event){
    //     $("#myButton").attr("disabled", "disabled");
    //     event.preventDefault();
    // })
    
    function text(){
        let $box = $('#message2').val();
        alert($box);
    }
    
    $("#message2").click(function(){
        $("#myButton").removeAttr("disabled");
        // event.preventDefault();
    })
</script>

我已经尝试使用带有警报的注释掉功能，它似乎会在我单击屏幕上的任意位置时出现警报。所以，恐怕我的问题是当我点击文本输入字段时，注释掉的功能也添加了禁用属性。当功能被注释掉时，提交按钮被禁用，直到我点击输入字段，但我无法弄清楚一旦用户点击输入框/字段后如何使按钮被禁用。

【问题讨论】：

这里的实际目标是什么？当有人在输入之外单击时，为什么要禁用提交按钮？
我只是想提高我的技能。我认为这看起来很专业，我也考虑过这样做，这样当输入字段为空时，按钮也会被禁用。但我先点击屏幕上的其他地方。让我知道这对你是否有意义。感谢您花时间帮助我:)
为什么不要求输入？表单将不会提交空的必填字段...
我想让它看起来很专业，我想我可以两者兼得。感谢您的想法！

标签： javascript html jquery

【解决方案1】：

为什么不只检测blur 事件，当相关元素失去焦点（即有人点击它之外）时会发生这种情况。也使用.prop 而不是.attr

$("#message2").blur(function(){
    if ($(this).val() =='') {
        $("#myButton").prop( "disabled", true );
    } else {
        $("#myButton").prop( "disabled", false );
    }
})

【讨论】：

您可以将其缩短为单行 $("#myButton").prop( "disabled", ($(this).val() == '' ) ? true:false);
非常感谢您抽出宝贵时间帮助我。我不知道这些功能。如果你不介意我问，我为什么要使用 prop 而不是 attr？
@Wayne - 我想它适用于 .attr 和 .prop ，因为我正在研究它。 jQuery 的网站推荐使用 .prop 来禁用元素。这是一个非常详细的讨论：stackoverflow.com/a/5876747/1772933

【解决方案2】：

您是否尝试使用 onblur() 事件？

<input type="text" id="message2" onblur="userClickedOut(this.value)">

function userClickedOut(value) {
  ...
}

HTH，彼得

【讨论】：