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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php实现爬取和分析知乎用户数据
2016/01/26 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
django的csrf实现过程详解
2019/07/26 Python
Pytorch之Variable的用法
2019/12/31 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
实习护士自我鉴定
2013/10/13 职场文书
费用会计岗位职责
2014/01/01 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
工作时间上网检讨书
2014/02/03 职场文书
法制宣传日活动总结
2014/04/29 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
使用python绘制分组对比柱状图
2022/04/21 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers