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 AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
基于vue.js实现的分页
Mar 13 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
python 返回列表中某个值的索引方法
2018/11/07 Python
Django如何实现上传图片功能
2019/08/16 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
冰淇淋店创业计划书范文
2013/12/27 职场文书
媒体宣传策划方案
2014/05/25 职场文书
公司任命书模板
2014/06/06 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python