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的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JS实现瀑布流布局
Oct 21 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
typescript配置alias的详细步骤
Aug 12 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防注
2007/01/15 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
javascript中怎么做对象的类型判断
2013/11/11 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
js实现常用排序算法
2016/08/09 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python匿名函数的使用方法解析
2019/10/10 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
毕业生的自我评价分享
2013/12/18 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
导游词开场白
2015/01/31 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python