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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
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的类 功能齐全的发送邮件类
2006/10/09 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php字符集转换
2017/01/23 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
全面分析Python的优点和缺点
2018/02/07 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python实现剪切功能
2019/01/23 Python
Python数学形态学实例分析
2019/09/06 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python运行DLL文件的方法
2020/01/17 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
超市活动计划书
2014/04/24 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
初中生物教学随笔
2015/08/15 职场文书
公司会议开幕词
2016/03/03 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书