input框内灰色提示性文本

iteye_15315

于 2013-01-05 16:48:06 发布

阅读量705

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： php

本文链接：https://blog.youkuaiyun.com/iteye_15315/article/details/82453206

js 专栏收录该内容

15 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*-------------------------------------- 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，效果出来了
})