input框内灰色提示性文本

最新推荐文章于 2022-11-28 11:57:53 发布

原创最新推荐文章于 2022-11-28 11:57:53 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用jQuery为HTML输入框实现提示文本效果的方法。通过简单的代码实现了当输入框获得焦点时提示文字消失，失去焦点且内容为空时提示文字重新出现的效果。

/*-------------------------------------- html 代码 -----------------------------------*/


<input type="text" value="例如：丽江"   class="grayTips" />
<input type="text"   value="您的用户名"   class="input-style1 grayTips"/>

/*--------------------------------------- JQ 代码 ----------------------------------------*/


function inputTipText(){
$("input[class*=grayTips]") //所有样式名中含有grayTips的input
.each(function(){
   var oldVal=$(this).val();     //默认的提示性文本
   $(this)
   .css({"color":"#888"})     //灰色
   .focus(function(){
    if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}
   })
   .blur(function(){
    if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}
   })
   .keydown(function(){$(this).css({"color":"#000"})})

})
}

$(function(){
inputTipText();    // OK，效果出来了
})