前幾天在“技術問答”上問了問題，然后有回復一句話就給概括了：placeholder的效果，不得不說。了解的多了才干說起來言簡意賅，用最簡單的語言描寫敘述最清晰的表達。

可是placeholder屬于html5新加入的屬性，兼容性還存在問題，查閱思考后，用js實現了它的實現效果。

先來看一下實現效果：

輸入password的時候

這就實現了效果了啊。然后呢，你發現上下圖的差別了么，是不是一下子就想到了實現的方法，是的。就這么簡單，來簡單說一下是實現的原理：

在“登錄郵箱”下，放兩個input，當中一個是text，還有一個是password。當點擊的時候顯示password，離開的時候顯示text。這樣就實現了，當然這里有個細節一定要注意，那就是更換顯示的input時，注意“聚焦”哦

好了來看一下實現的代碼：

<input type="text" id="loginPwd" class="loginText" value="-登陸password-" οnclick="change()" οnmοuseοver=this.focus();this.select();> <input type="password" name="loginPwd" id="realPwd" style="display: none;" class="loginText" onBlur="back()">首先，將password和text都羅列上。讓password先保持display為none。點擊的時候調用js

function change(){document.getElementById("loginPwd").style.display='none';document.getElementById("realPwd").style.display='inline';document.getElementById("realPwd").focus(); }然后。假設想返回初始狀態的話，就調用back()方法

function back(){var msg=document.getElementById("realPwd").value;if(msg.length==0){document.getElementById("loginPwd").style.display='inline';document.getElementById("realPwd").style.display='none';} }
假設判定沒有輸入值，而且失去焦點的時候就要返回最初的狀態。這樣就得到想要的效果了啊。

真的非常感謝前幾天給我提示的兩個哥們。發現真的非常多時候是不知道該怎樣搜索，知道想要的效果。可是不知道該怎樣更有效的表達，然后進行搜索。導致難度憑空漲了好幾個點。還是須要多學習啊，加油...

轉載于:https://www.cnblogs.com/zfyouxi/p/5400659.html

總結

以上是生活随笔為你收集整理的积跬步，聚小流-------js实现placeholder的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。