输入框提示信息

最新推荐文章于 2023-10-15 10:58:51 发布

iteye_19819

最新推荐文章于 2023-10-15 10:58:51 发布

阅读量145

点赞数

分类专栏：学习笔记文章标签： CSS jQuery HTML ViewUI

本文链接：https://blog.csdn.net/iteye_19819/article/details/81991581

版权

学习笔记专栏收录该内容

64 篇文章 0 订阅

订阅专栏

一、直接用js实现；


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script>
    function OnEnter( field ) { 
        if( field.value == field.defaultValue ) { 
            field.value = ""; 
        }
    }
    function OnExit( field ) {
        if( field.value == "" ) { 
            field.value = field.defaultValue; 
        }
    }
</script>
<body>
<input type="text" value="提示信息"  onFocus="OnEnter(this)" onBlur="OnExit(this)">
<input type="text" value="提示信息"  onFocus="OnEnter(this)" onBlur="OnExit(this)">
</body>
</html>

二、借助jquery来完成


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></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="grayTips" /> 
</body>
</html>