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 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
详解Vue方法与事件
Mar 09 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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
php array_walk() 数组函数
2011/07/12 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
用js重建星际争霸
2006/12/22 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python的re模块正则表达式操作
2016/05/25 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
益模软件Java笔试题
2012/03/27 面试题
铭立家具面试题
2012/12/06 面试题
Java程序员综合测试题
2014/04/25 面试题
教师申诉制度
2014/01/29 职场文书
团员自我评价范文
2015/03/10 职场文书
微信小程序调用python模型
2022/04/21 Python