如何实现文本框输入时立即隐藏div，无需点击失焦触发

问题原因 #

jQuery 中的change事件仅在表单元素失去焦点、且内容发生过变更时才会触发，这就是你当前代码仅在点击文本框外后才生效的原因。

修改方案 #

将绑定的change事件替换为input事件即可，该事件会在输入框值发生任何变化时实时触发，覆盖键盘输入、右键粘贴/剪切、浏览器自动填充等所有值变更场景，无需等待失焦。
修改后的完整代码：

<script type="text/javascript" charset="utf-8">
    $('#email').on('input', function () {
      var len = $('#email').val().length;
      if (len > 0) {
          $("#user_accounts").fadeOut(1)
      } else {
          $("#user_accounts").fadeIn(1)
      }
    });
</script>

老旧浏览器兼容（可选） #

如果需要兼容IE8及更早版本，可同时绑定input和propertychange事件：

$('#email').on('input propertychange', function () {
  // 原有逻辑保持不变
})

内容的提问来源于stack exchange，提问作者user1601716