JavaScript | 阻止預設事件 點選按鈕後input框不失去焦點
阿新 • • 發佈：2019-02-10
想實現一個登入介面常用的效果：點選按鈕後切換input框的顯示/隱藏密碼
首先想到的是，在按鈕的點選事件裡呼叫focus()使input獲得焦點，程式碼如下：
<body> <input id="psw" type="password"> <button id="btn">顯示/隱藏</button> </body> <script> var isExposed=false; var btn=document.getElementById('btn'); var psw=document.getElementById('psw'); btn.onclick=function(){ psw.focus(); if (isExposed) { //切換為隱藏 psw.type='password'; isExposed=false; }else{ //切換為顯示 psw.type='text'; isExposed=true; } } </script>
可這樣做的效果是input失去焦點後又馬上獲得，效果不理想。
於是使用第二種方法，在按鈕的onmousedown事件中阻止預設事件，程式碼如下：
<body> <input id="psw" type="password"> <button id="btn">顯示/隱藏</button> </body> <script> var isExposed=false; var btn=document.getElementById('btn'); var psw=document.getElementById('psw'); btn.onclick=function(){ if (isExposed) { //切換為隱藏 psw.type='password'; isExposed=false; }else{ //切換為顯示 psw.type='text'; isExposed=true; } } btn.onmousedown=function(e){ //現代瀏覽器阻止預設事件 if ( e && e.preventDefault ) e.preventDefault(); //IE阻止預設事件 else window.event.returnValue = false; return false; } </script>
ok 成功實現效果~ :D