javascript - 模糊一个表单，除了它的提交按钮，这可能吗？

Question

我有一个表格:

<form>
<input type="text">
<input type="submit">
</form>

提交时，我想模糊整个表单:

$(this).closest('form').css({
 'filter' : 'blur(1px)'
});

不幸的是，这也模糊了我的提交按钮。如何使这个异常？

Answer 1

我这样做的方法是模糊表单的所有子 DOM 元素，提交输入除外。您可以通过带有 jQ​​uery 或简单类名的属性选择器来做到这一点。下面是一个使用类名的例子:

HTML

<form id="myForm">
  <input type="text">
  <input type="submit" class="visibile-on-blur">
</form>

Javascript (jQuery)

$('#myForm').submit(function( event ) {
  event.preventDefault();
  $(this).children(':not(.visibile-on-blur)').css({
    'filter' : 'blur(1px)'
  });
});

引用下面的 fiddle 。 https://jsfiddle.net/sotjrvco/1/