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 相关文章推荐
js中格式化日期时间型数据函数代码
Nov 08 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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
收音机的保养
2021/03/01 无线电
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python文件特定行插入和替换实例详解
2017/07/12 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
企业后勤岗位职责
2014/02/28 职场文书
难忘的一课教学反思
2014/04/30 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
新郎结婚保证书
2015/02/26 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏