Question

这是我在Stack上遇到的第一个问题，如果帖子的格式不正确，我深感抱歉。

我已经针对问题提出了建议的答案，但似乎没有与我面临的问题相匹配的问题。

我有两个默认情况下处于禁用状态的按钮。然后是一个jQuery，它检查是否已将数据输入到表单中的文本字段中。如果未输入任何内容，则按钮保持禁用状态。如果有文字-启用按钮，则可以提交表单。

按钮只是简单的html代码

<form id="myForm" action="/platformDev/create_subscription.php" method="POST">
        <div class = "productcreate">
        <div data-html="true" class="producttooltip tooltip-custom" title="Enter your product name, include any relevant information. &lt;br /&gt; Include how you count the product, for example; (Each), (Box), (Case) etc">?</div>
        <label style="font-size:14px" class="control-label no-comma"><font color="black"><strong>Product Name</strong></font></label> <span class="required_field">   </span>
        <form autocomplete="off"><input style="" type="text" autocomplete="off" required class="form-control-login" id="inputFieldId" autofocus="autofocus" name="product_name" tabindex="-1"/>     <br/>
    </div>
        <div id=dep_drop><label style="font-size:14px" class="control-label"><font color="black"><strong>Department - <a id="DepForm" data-toggle="modal" data-target="#DepModal">Add Departments</a></strong></font></label>
        <select class='form-control select_element nc_department_id_new'    name='department_id_new'><option  value='AMBIENT'> AMBIENT</option><option  value='BREAKFAST'> BREAKFAST</option><option  value='BRUSH'> BRUSH</option><option  value='Confectionary'> Confectionary</option><option  value='DRESSING AND SAUCES'> DRESSING AND SAUCES</option><option  value='Free'> Free</option><option  value='KEELINGS JUICES'> KEELINGS JUICES</option><option  value='PACKAGING'> PACKAGING</option><option  value='SMOOTHIE'> SMOOTHIE</option><option  value='VEGETABLES'> VEGETABLES</option><option  value='WRAPS AND BREAD'> WRAPS AND BREAD</option></select></div>
            <br>
        <div class = "productcreate">
        <div data-html="true" class="producttooltip tooltip-custom" title="Enter in the correct cost price for the product above">?</div>
        <label style="font-size:14px" class="control-label"><font color="black"><strong>Cost Price</strong></font></label> <span class="required_field">   </span>
        <form autocomplete="off"><input type="text" autocomplete="off" required class="form-control-login" id="cost_price" name="cost_price" onkeypress="return isNumberKey(event, this)"/>     <br/>
    </div>

    </form>
</div>
  </div>
        <div>
            <label style="float:left; width: 40%; font-weight: bold; margin-top: -15px; margin-left: 42px; margin-bottom: 0px; color:black;">(Press Enter)</label>
            <label style="float:right; width: 40%; font-weight: bold; margin-top: -15px; margin-right: -120px; margin-bottom: 0px; color:black;">(Press Shift)</label>
        </div>
<div style="margin-left: 0.5px;"class="submitactions modal-footer content_container">
    <input disabled="disabled" readonly="readonly" class="btn form-btns btn-primary ajax_forms_save_more" style="width: 24%; float: left; margin-right: 8px !important;" type="submit "id="customButtonSave" value="Save & New"/>
    <input disabled="disabled" readonly="readonly" class="btn form-btns btn-primary ajax_forms_save"  style="width: 24%; float: right; margin-right: 8px !important;" id="customButton" value="Save & Close"/>

</div>

然后在document.ready函数中，我使用以下jQuery检查是否已输入文本

$('.productcreate input').keyup(function() {

    var empty = false;

    $('.productcreate input').each(function() {
        if ($(this).val().length == 0) {
            empty = true;
        }
    });

    if (empty) {
        $('.submitactions input').attr('disabled', 'disabled');
    } else {
        $('.submitactions input').attr('disabled', false);
    }
});

该代码在Chrome和Firefox中可以正常运行，但在Safari中却无法执行任何操作。控制台中没有出现错误。我不确定要使它在所有浏览器上都可以使用的替代解决方案是什么？ Safari是否在其他事件上触发触发器？这确实是我第一次使用Safari，所以我对此并不熟悉。

Answer 1

您可以测试以下几行，以确保在Safari浏览器中对您有帮助：

$('.productcreate input').live('keyup',function() { ...

$('.productcreate input').on('keyup',function() {...

这些行支持野生动物园浏览器。

Answer 2

您的代码有点混乱。

1）您可以使用<button></button>提交，而不用输入（首选项）

2）您在事件处理程序中嵌套了一个.each()循环函数，除了使您的初始值变为空之外，该函数什么也没做。

3）您可以使用本机document.querySelector()和.addEventListener()将函数绑定到事件。

这是一个有效的示例：

var othersCompleted = false;
var $submitButtons = $('.submitactions button');

$('.productcreate input').on('keyup', function(e) {
var $this = $(this);
var valueLength = this.value.length;

$this.siblings().each(function () {
    if (this.value.length > 0) { othersCompleted = true }
})

valueLength < 1 || othersCompleted === false ? $submitButtons.attr('disabled', 'disabled') : $submitButtons.attr('disabled', false)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productcreate">
  <input type="text" />
  <input type="text" />
</div>

<div style="margin-left: 0.5px;"class="submitactions modal-footer content_container">
    <button disabled="disabled" readonly="readonly" class="btn form-btns btn-primary ajax_forms_save_more" style="width: 24%; float: left; margin-right: 8px !important;" type="submit " id="customButtonSave">
      Save & New
    </button>
    <button disabled="disabled" readonly="readonly" class="btn form-btns btn-primary ajax_forms_save"  style="width: 24%; float: right; margin-right: 8px !important;" id="customButton" />
    Save & Close
    </button>
</div>

KeyUp功能可在Firefox和Chrome上运行，但不能在Safari上运行

2 个答案: