jQuery 获取焦点等_jquery on focus-CSDN博客

本文链接：https://blog.csdn.net/supreme_yes/article/details/80135448

本文介绍了使用jQuery处理文本框获取焦点时的背景变色、内容清空及默认值还原，以及单选框全选、反选、全不选的功能实现，同时还讲解了字符长度检测的方法，包括添加提示元素、更改样式和内容来实现验证反馈。

摘要由CSDN通过智能技术生成

  1.获取焦点问题 

  1.要求： 

  1. 在文本框获取焦点时背景变红，失去焦点时移除这个效果 

  2.获取焦点时清空文本框的内容区 

  3.如果用户填写的内容为空，则还原之前的默认值 

  2.涉及知识点 

  1.$(“:input”)选择所有文本框 

  2.this.value 当前值 this.defaultValue之前值 

  3.this.value $(this).val()获取文本框的值 

  4.this.value=""清空文本框的值 

  5.文本域没有value属性 但中间内容区可以看成是value 

  6..on("focus",function(){})获取焦点时触发 

  .on("blur",function(){})获取焦点时触发 

  hover(function(){},function(){})获取焦点时触发/划出焦点时触发 

  7.toggleClass("app") 对app类进行反制 

  .addClass（“app”）添加类 

  .removeClass("app")删除类 

  3.代码实现 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>Document</title> 

  <style type="text/css"> 

*{

  margin:0; 

  padding: 0; 

}

  ul,li{ 

  list-style: none; 

}

  #username,#userword,#usertext{ 

  display: block; 

}

  .red{ 

  background: red; 

}

  </style> 

  <div id="app"> 

  名称：<input type="text" id="username" class="app" value="名称"> 

  密码: <input type="password" name="" id="userword" class="app" value="密码"> 

  详细信息：<br><textarea name="" id="" cols="30" rows="10" id="usertext" class="app">详细信息</textarea> 

jQuery 获取焦点 等