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

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

先來看一下實(shí)現(xiàn)效果：

輸入password的時(shí)候

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

在“登錄郵箱”下，放兩個(gè)input，當(dāng)中一個(gè)是text，還有一個(gè)是password。當(dāng)點(diǎn)擊的時(shí)候顯示password，離開的時(shí)候顯示text。這樣就實(shí)現(xiàn)了，當(dāng)然這里有個(gè)細(xì)節(jié)一定要注意，那就是更換顯示的input時(shí)，注意“聚焦”哦

好了來看一下實(shí)現(xiàn)的代碼：

<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。點(diǎn)擊的時(shí)候調(diào)用js

function change(){document.getElementById("loginPwd").style.display='none';document.getElementById("realPwd").style.display='inline';document.getElementById("realPwd").focus(); }然后。假設(shè)想返回初始狀態(tài)的話，就調(diào)用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';} }
假設(shè)判定沒有輸入值，而且失去焦點(diǎn)的時(shí)候就要返回最初的狀態(tài)。這樣就得到想要的效果了啊。

真的非常感謝前幾天給我提示的兩個(gè)哥們。發(fā)現(xiàn)真的非常多時(shí)候是不知道該怎樣搜索，知道想要的效果。可是不知道該怎樣更有效的表達(dá)，然后進(jìn)行搜索。導(dǎo)致難度憑空漲了好幾個(gè)點(diǎn)。還是須要多學(xué)習(xí)啊，加油...

轉(zhuǎn)載于:https://www.cnblogs.com/zfyouxi/p/5400659.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。