jQuery实现input文本框内灰色提示文本效果和 input标签获取焦点是文本框内提示信息清空...

最新推荐文章于 2022-01-06 18:24:04 发布

full-stack-coder

最新推荐文章于 2022-01-06 18:24:04 发布

阅读量230

点赞数

分类专栏： JQuery 文章标签： jQuery CSS JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/zhanweichun/article/details/83835463

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、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></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>

full-stack-coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现input文本框内灰色提示文本效果和 input标签获取焦点是文本框内提示信息清空...

一、jQuery实现input文本框内灰色提示文本效果 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;input test&lt;/title&gt; &lt;scri
复制链接

扫一扫