Question

我想阻止双击，因此在点击事件中设置disabled元素上的input属性似乎是正确的做法。而其他stackoverflow答案反映了这一点。这就是我在CoffeeScript中使用jQuery编写的内容：

$('input[type="submit"]').on('click', ->
  $(this).addClass('disabled').attr('disabled', 'disabled')
  $(this).val('Sending')
)

我有addClass('disabled')为基金会。

一般来说这都有效。但是，如果我单击后退，该按钮仍处于禁用状态。如果我转到页面并缓存页面，则仍然禁用该按钮。是否有一个JavaScript库来处理所有这些小问题？似乎这是一个非常普遍的需求。我需要添加一些JavaScript / jQuery吗？

我认为HTML5现在会有一些机制。

更新：我试图收听pageshow个事件并取消禁用提交按钮：

$('input[type="submit"]').on('pageshow', function() {
  console.log('pageshowed')
  $(this).removeClass('disabled').removeAttr('disabled').val('Submit');
});

但是，即使首次加载页面也没有任何反应。我使用pageshow错了吗？

Answer 1

使用window对象上的pageshow event。适用于Chrome和Safari以及Firefox，不确定IE，不适用于Opera 12（但在Opera 15中可以使用，因为它与Chrome相同）。在控制台中尝试typeof window.onpageshow进行检测。

Answer 2

我使用这种方法：

$(document).ready(function() {
  $('.auto-submit-disable')
    .submit(function () {
      $(this).find('button,input[type=submit]')
        .attr('disabled', 'true');
    });
});

if ($('.auto-submit-disable'))
  window.onunload = function(){}; // This forces re-execution of js

之后，只需将class="auto-submit-disable"放在您的表单上即可。请注意，该方法对浏览器来说很重要，因为在反向导航时重复所有JS很重。

因此，不建议将其作为一般方法在所有页面上运行!!

单击后禁用HTML按钮以防止双击

2 个答案: