html里输入框和密码框的提示文字怎么弄

html-css020

html里输入框和密码框的提示文字怎么弄,第1张

<script type="text/javascript">

 $(document).ready(function(){

   $("#focus .input_txt").each(function(){

     var thisVal=$(this).val()

     //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示

     if(thisVal!=""){

       $(this).siblings("span").hide()

      }else{

       $(this).siblings("span").show()

      }

     //聚焦型输入框验证 

     $(this).focus(function(){

       $(this).siblings("span").hide()

      }).blur(function(){

        var val=$(this).val()

        if(val!=""){

         $(this).siblings("span").hide()

        }else{

         $(this).siblings("span").show()

        } 

      })

    })

    $("#keydown .input_txt").each(function(){

     var thisVal=$(this).val()

     //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示

     if(thisVal!=""){

       $(this).siblings("span").hide()

      }else{

       $(this).siblings("span").show()

      }

      $(this).keyup(function(){

       var val=$(this).val()

       $(this).siblings("span").hide()

      }).blur(function(){

        var val=$(this).val()

        if(val!=""){

         $(this).siblings("span").hide()

        }else{

         $(this).siblings("span").show()

        }

       })

     }) 

  })

</script>

给文本框加上placeholder属性就可以了,这样文本框获得焦点文字不会消失,只有当文本框的值改变之后才会消失。

下面是参考代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Html5基本结构</title>

</head>

<body>

<input type="text" placeholder="请输入文本">

</body>

</html>

效果: