Jquery EasyUI input textbox监听实时输入

宰鸿博
2023-12-01

不知道说啥,直接上代码:

<script>
(function() {
  // 注册inpupt的输入改变事件
  let tipArr = ['userName', 'oldPassword', 'newPassword', 'confirmPassword'];
  for(let i = 0; i < tipArr.length; i++) {
    let key = tipArr[i];
    // .textbox 的 onChange 只能监听到有内容且内容改变后的事件...
    //(PS: 如果把input清空了,是不触发该事件的...)
    // $("#" + key + "").textbox({
    //   onChange: function () {
    //     if ($("#" + key + "").val()) {
    //       $("#" + key + "_tip").hide();
    //       hideFormTips([`${key}`])
    //     }
    //   }
    // });
    
    // 用 .passwordbox 的 onChange 居然实现了监听实时输入的内容...
    // (PS:input内容变化过程中,该事件一直在触发,相当于jq的[input propertychange]...)
    $("#" + key + "").passwordbox({
      onChange: function () {
        console.log($("#" + key + "").val())
        if ($("#" + key + "").val()) {
          $("#" + key + "_tip").hide();
          hideFormTips([`${key}`]);
        } else {
          //showFormTips([`${key}`]);
        }
      },
      showEye: false,
      revealed: !key.includes('Password') // 定义是否明码显示输入的信息。
    });
  }
})()

  // 显示表单input底部的提示信息
  function showFormTips(keysArr) {
    if (!keysArr || keysArr.length === 0) return;
    for(let i = 0; i < keysArr.length; i++) {
      let key = keysArr[i];
      $("#" + key + "_tip").show();
    }
  }

  // 隐藏表单input底部的提示信息
  function hideFormTips(keysArr) {
    let tipArr = keysArr || ['userName', 'oldPassword', 'newPassword', 'confirmPassword'];
	for(let i = 0; i < tipArr.length; i++) {
	  let key = tipArr[i];
	  $("#" + key + "_tip").hide();
	}
  }
</script>
 类似资料: