jQuery简单实现input文本框内灰色提示文本效果的方法


Posted in Javascript onDecember 02, 2015

本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考,具体如下:

$(function(){  
  $(".grayTips").each(function(){ //遍历每个文本框
    var objTextBox=$(this);
    var oldText=$.trim(objTextBox.val());
    objTextBox.css("color","#888"); 
    objTextBox.focus(function(){
      if(objTextBox.val()!=oldText){
        objTextBox.css("color","#000");
      }
      else{
        objTextBox.val("").css("color","#888");
      }
    });
    objTextBox.blur(function(){
      if(objTextBox.val()==""){
        objTextBox.val(oldText).css("color","#888");
      }
    });
    objTextBox.keydown(function(){
      objTextBox.css("color","#000");
    });
  });
});

说明:需要引入jquery.js文件  input和TextBox都有效

$(function(){
 $(".grayTip").each(function(){
  var $input=$(this);
  $input.css("color","#888");
  var oldText=$.trim($input.val());
  $input.focus(function(){
  var newText=$.trim($input.val());
  if (newText==oldText){
   $input.val("");   
  }
  $input.css("color","#000");
  });
  $input.blur(function(){
  var newText=$.trim($input.val());
  if(newText==""){
   $input.val(oldText);
   $input.css("color","#888");
  }
  });
 }); 
});

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

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
jquery实现简单文字提示效果
Dec 02 #Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 #Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
jqGrid中文文档之选项设置
Dec 02 #Javascript
javascript实现自动填写表单实例简析
Dec 02 #Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 #Javascript
纯js代码实现简单计算器
Dec 02 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php 文本文件的读取效率
2012/02/10 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python 简单的多线程链接实现代码
2016/08/28 Python
python selenium firefox使用详解
2019/02/26 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
打架检讨书50字
2014/01/11 职场文书
校本教研工作方案
2014/01/14 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
绿色环保口号
2014/06/12 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
门市房租房协议书
2014/12/04 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
毕业论文致谢范文
2015/05/14 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书