实现当输入框为空时，按backspace键后执行相应操作(明确按键监听事件和文本框内容变化的内在逻辑)

在做博客项目的评论区功能时，想实现输入框（如input、textArea）内容为空时，按backspace键后清除placeholder和父级评论id，需要使用按键监听事件。

一开始我绑定了jQuery的keyup事件，js代码如下：

//文本框为空时，判断是否按了backspace，若是，则清除placeholder和父级评论id
$("#commentContent").keyup(function (e) {
   var contentVal =  $("[name='commentContent']").val();
   if((contentVal===null || contentVal==="") && e.keyCode === 8){
   	  console.log("111");
   	  //设置评论的父级评论id为空
      $("[name='commentParentId']").val("");
      //设置点击回复后文本框显示的提示信息为空
      $("[name='commentContent']").attr("placeholder","");
   }
});

通过控制台打印日志发现，如果输入了一些字符，当删除最后一个字符时，条件判断语句的内容被执行。如果是这样的话，那点击回复并输入一些内容后，如果想删除内容再重新编写，那又得再点击一次回复来设置要回复的对象。

通过尝试后发现，将keyup替换为keydown事件可以实现：文本框为空时，按backspace键后执行相应代码：

由此可以推测，在按键按下后，输入框发生变化，然后按键抬起。这样就解释的通了：
使用keyup事件时，监听的输入框内容是已经变化的了，如果这时输入框内容为空，keyup监听生效，便会进入我的条件判断语句中；
使用keydown事件时，按键按下时就开始监听了，如果这时输入框不为空，则条件语句不会进入。当keydown监听语句执行结束后，输入框才发生变化。

//文本框为空时，判断是否按了backspace，若是，则清除placeholder和父级评论id
$("#commentContent").keydown(function (e) {
   var contentVal =  $("[name='commentContent']").val();
   if((contentVal===null || contentVal==="") && e.keyCode === 8){
      //设置评论的父级评论id为空
      $("[name='commentParentId']").val("");
      //设置点击回复后文本框显示的提示信息为空
      $("[name='commentContent']").attr("placeholder","");
   }
});

标签：name,键后,contentVal,输入框,文本框,commentContent,监听
来源： https://blog.csdn.net/weixin_43779071/article/details/119296127