熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery表單獲取和失去焦點輸入框提示效果

2022-06-13   來源: JSP教程 

  <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" " <html xmlns=" <head> <meta httpequiv="ContentType" content="text/html; charset=utf" /> <title>無標題文檔</title> <script src=" type="text/javascript"> </script> <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> <style type="text/css"> form{width:px;margin:px auto;border:solid px #EDEDE;background:#FCFEF; padding:px;boxshadow: px px rgba() inset;} label{display:block;height:px;position:relative;margin:px ;} span{position:absolute;float:left;lineheight:px;left:px;color:#BCBCBC;cursor:text;} input_txt{width:px;border:solid px #ccc;boxshadow: px px rgba() inset; height:px;textindent:px;} input_txt:focus{boxshadow: px rgba();border:solid px #B;} border_radius{borderradius:px;color:#B;} h{fontfamily:"微軟雅黑";textshadow:px px px #fff;} </style> </head> <body> <form class="border_radius" id="focus"> <h>聚焦型提示語消失 無效果請刷新</h> <label><span>花瓣注冊郵箱</span><input type="text" class="input_txt border_radius" /> </label> <label><span>密碼</span><input type="text" class="input_txt border_radius" /></label> </form> <form class="border_radius" id="keydown"> <h>輸入型提示語消失</h> <label><span>花瓣注冊郵箱</span><input type="text" class="input_txt border_radius" /> </label> <label><span>密碼</span><input type="text" class="input_txt border_radius" /></label> </form> </body> </html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20161.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.