jQuery设置input文本框内灰色提示效果_jquery特效

jQuery设置input文本框内灰色提示效果: 发布时间：2020-01-18编辑：脚本学堂

本文介绍了jquery设置input文本框内灰色提示文本效果的方法，以及input标签获取焦点是文本框内提示信息清空的例子，有需要的朋友参考下。

一、jquery实现input文本框内灰色提示文本效果

复制代码代码示例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
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了
})
</script>
</head>
<body>
<input type="text" value="输入您的用户名" class="grayTips" />
<input type="text" value="输入您的登录密码" class="aaagrayTips"/>
</body>
</html>

二、input标签获取焦点时文本框内提示信息清空

复制代码代码示例:

<html>

<head>

<title>获取焦点时文本框内提示信息清空-www.jb200.com</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<script language="javascript" type="text/javascript"> 

function addLoadEvent(func){

    var oldonload = window.onload;

    if (typeof window.onload != 'function'){

        window.onload = func;

    }else{

        window.onload = function(){

        oldonload();

        func();

        }

    }

}

function checkText(){

    var textId = document.getElementById('test');

    //设置文本框中的字体颜色为灰色

    document.getElementById('test').style.color='#C0C0C0';

    var textDefault = '中文';

    function cls(){

    if (this.value == textDefault){

        this.value = '';

        }

    }

    function res(){

    if (this.value == ''){

       this.value = textDefault;

        }

    }

    textId.onfocus = cls;

    textId.onblur = res;

}

addLoadEvent (checkText);

</script>

<body>

<input type="text" id="test" value="中文" />

</body>

</html>

上一篇：jquery 图片轮播代码示例
下一篇：jquery easyui课程表拖放效果代码

与 jQuery设置input文本框内灰色提示效果有关的文章

本文标题：jQuery设置input文本框内灰色提示效果
本页链接：http://www.jb200.com/article/jquery/20517.html

浏览排行

栏目分类

热点文章

jQuery设置input文本框内灰色提示效果