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

html-css07

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>

html5 可以直接用 placeholder="请输入员工号"

js的话 你需要多制作的一个标签，比如span，覆盖在输入框的上方 鼠标进入的时候显示这个span，离开的时候就隐藏，原理就是这样

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">

<html>

<div style="position:relative">

  <input type="password" name="pwd" />

  <span style="position:relativeleft:-120pxz-index:2">请输入密码</span>

</div>

</body>

</html>

你应该用这种思路。

用相对定位，使之偏移，浮于密码框之上。

输入密码后，隐藏提示信息。判断为空时显示提示信息。