Contact form 7无法使用Safari到期文件上载按钮

Question

正如您已经知道的；使用CF7插件构建的联系人表单在使用Safari时不能提交，并且联系人表单包含文件上传按钮时无法提交。只有当用户将上载域保留为空时，才会出现此问题，因此不选择文件。

对我来说，这个问题的最佳解决方案是在没有选择文件的情况下删除文件上传按钮。通过下面的Jquery脚本，我已经在一定程度上做到了这一点：

jQuery(document).on('submit', '.wpcf7-form', function (e) {
  jQuery('input.wpcf7-file').each(function() {
    if (jQuery(this).val() == '') jQuery(this).remove();
  });
});

只剩下一个问题了，…当表单在upload字段保留为空的情况下提交时，按钮将被移除，但旋转箭头图标仍在旋转，并且没有任何反应。只有当用户再次提交表单时，提交才会成功。

所以我想用几行代码来扩展上面显示的代码，在文件上传域为空的情况下，它会自动提交第二次联系人表单。因此，用户不必提交两次联系人表单，这可能会使…非常困惑

有人能帮我解决这个问题吗？我认为这对许多其他用户来说也是一个很好的解决方案，因为我读过许多有相同问题的人的主题。

提前感谢&祝你有愉快的一天！

诚挚的问候

Answer 1

我认为您的问题源于这样一个事实："submit“方法是在表单提交开始之后(或者至少在收集表单字段之后)触发的。因此，在第二次单击时，它会重新提交没有空字段的表单。

我已经实现了脚本的一个版本，但绑定到提交按钮上的单击，而不是表单的提交方法。到目前为止，它似乎在起作用。

我尝试让它只在受影响的浏览器上触发(使用nagivator.userAgent.match())，但在我寻找的短暂时间内没有太多幸运。

<script>
jQuery(document).on('click', '.wpcf7-form [type=submit]', function (e) {
  jQuery('input.wpcf7-file').each(function() {
    if (jQuery(this).val() == '') jQuery(this).remove();
  });
});
</script>