輸入框提示資訊
阿新 • • 發佈：2019-02-06
輸入框的資訊提示
在很多時候我們都想要在使用者輸入資訊之前在輸入框給出提示，在使用者輸入資訊後提示資訊消失
1：在html5出現placeholder之後這個問題就很簡單
2：用js做資訊提示
第二種方法就是用onfocus和onblur這兩個方法做一個切換的判斷在輸入框有焦點時判斷裡面的資訊和提示資訊是否一樣如果一樣就為空；當輸入框失去焦點
後如果類容為空則在輸入框換上提示資訊
在很多時候我們都想要在使用者輸入資訊之前在輸入框給出提示，在使用者輸入資訊後提示資訊消失
1：在html5出現placeholder之後這個問題就很簡單
<input type="text" class="use" name="q" placeholder="請輸入使用者名稱">但是對於placeholder只有在一些支援html5的瀏覽器才會有效果對於這樣的問題就要藉助js了
2：用js做資訊提示
<input type="text" class="use" name="q" value="請輸入賬號" onfocus="if(this.value=='請輸入賬號'){this.value='';}"onblur="if(this.value==''){this.value='請輸入賬號';}" maxlength="50" size="14" >
第二種方法就是用onfocus和onblur這兩個方法做一個切換的判斷在輸入框有焦點時判斷裡面的資訊和提示資訊是否一樣如果一樣就為空；當輸入框失去焦點
後如果類容為空則在輸入框換上提示資訊
對於上面的方法在遇到要輸入密碼的輸入框就有會出現新的麻煩，因為我們想在沒輸入密碼的時候能看到資訊提示在輸入密碼是資訊是type="password"型別的，所以就有了下面的寫法；
<div class="land_ps button"js：> <input type="text" class="pw" name="" value="請輸入密碼" maxlength="20" size="14" id="tx"> <input type="password" class="pw" name="" maxlength="20" size="14" id="pwd" style="display: none"> </div>
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd"); tx.onfocus = function(){ if(this.value != "請輸入密碼") return this.style.display = "none"; pwd.style.display = ""; pwd.value = ""; pwd.focus(); } pwd.onblur = function() { if (this.value != "") return; this.style.display = "none"; tx.style.display = ""; tx.value = "請輸入密碼"; }