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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
JS Attribute属性操作详解
May 19 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
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
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python的另外几种语言实现
2015/01/29 Python
Python数据操作方法封装类实例
2017/06/23 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python怎么删除缓存文件
2020/07/19 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
党风廉政承诺书
2014/03/27 职场文书
房产转让协议书
2014/04/11 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
辩护词格式
2015/05/22 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python