jQuery文本框得到与失去焦点动态改变样式效果


Posted in Javascript onSeptember 08, 2016

本文实例讲述了jQuery文本框得到与失去焦点动态改变样式效果。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
  font: normal 12px/17px Arial;
}
div {
  padding: 2px;
}
input, textarea {
  width: 12em;
  border: 1px solid #888;
}
.focus {
  border: 1px solid #f00;
  background: #fcc;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $(":input").focus(function(){
    $(this).addClass("focus");
  }).blur(function(){
    $(this).removeClass("focus");
  });
})
</script>
</head>
<body>
<form action="" method="post" id="regForm">
  <fieldset>
    <legend>个人基本信息</legend>
    <div>
      <label for="username">名称:</label>
      <input id="username" type="text" />
    </div>
    <div>
      <label for="pass">密码:</label>
      <input id="pass" type="password" />
    </div>
    <div>
      <label for="msg">详细信息:</label>
      <textarea id="msg" rows="2" cols="20"></textarea>
    </div>
  </fieldset>
</form>
</body>
</html>

运行效果图如下:

jQuery文本框得到与失去焦点动态改变样式效果

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
js+css实现select的美化效果
Mar 24 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
详解Puppeteer 入门教程
May 09 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
jQuery动态改变多行文本框高度的方法
Sep 07 #Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 #Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 #Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 #Javascript
JS实现页面载入时随机显示图片效果
Sep 07 #Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
You might like
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python使用scrapy发送post请求的坑
2018/09/04 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python爬取内容存入Excel实例
2019/02/20 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python递归函数用法详解
2020/10/26 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
《彩色世界》教学反思
2014/04/12 职场文书
学校节能减排倡议书
2014/05/16 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
革命电影观后感
2015/06/18 职场文书
小学美术教学反思
2016/02/17 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript