js-onfocus事件:onfocus 事件在對象獲得焦點時發生;
該時間支持的html標簽
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
支持該事件的js對象
button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit,
text, textarea, window
實例
<html> <head> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow" } </script> </head> <body> First name: <input type="text" onfocus="setStyle(this.id)" id="fname" /> <br /> Last name: <input type="text" onfocus="setStyle(this.id)" id="lname" /> </body> </html>
當用鼠標點擊input窗口的時候 input背景顏色為黃色
---------------------------------------------------------------------------------------------------------------------------------------------------------------
js-onblur事件:onblur 事件會在對象失去焦點時發生;
該時間支持的html標簽 與onfocus一樣
支持該事件的js對象 與onfocus一樣
實例
<html> <head> <script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() //toUpperCase() 方法用於把字符串轉換為大寫
}
</script>
</head>
<body>
輸入您的姓名： <input type="text" id="fname" onblur="upperCase()"/>
</body>
</html>
在input窗口中輸入小寫的英文 當input失去焦點的時候 將剛輸入的input的value內容轉成大寫
----------------------------------------------以下是自己寫的一個小例子-----------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" type="text/css" href=""> <style type="text/css"> .aaa{width:155px;height:23px;overflow:hidden;} #inputone{position:absolute;background:transparent;outline:none;} .spanone{margin-left:50px;line-height:25px;} </style> </head> <body> <div class="aaa" id="aaa"> <input id="inputone" type="text" value="" autocomplete="off"> <span id="spanone" class="spanone">點擊</span> </div> </body> <script type="text/javascript"> <!-- var inputone=document.getElementById('inputone'); var spanone=document.getElementById('spanone'); var diva=document.getElementById('aaa'); inputone.onfocus=function(){ spanone.style.display="none"; } inputone.onblur=function(){ if (inputone.value.length==0) { spanone.style.display="block"; } } //--> </script> </html>
input上有個'點擊'的顯示 當鼠標點擊input的時候,'點擊'文字消失 js判斷 如果input的vlaue值為空 鼠標移開 也就是input失去焦點的時候 ‘點擊’文字再次出現
注釋：background:transparent; 背景透明