需求：充分考慮使用者體驗，輸入使用者名稱和密碼時，不用按Tab鍵，而是按enter鍵就可以進行上下切換。並且為了其美觀性，在input獲得焦點時，placeholder會消失。

描述：通常在做input來提交使用者名稱和密碼時，會用placeholder來提示使用者。比如：

但是當用戶輸完使用者名稱後，很少使用者知道用Tab鍵來切換到密碼處，只能用滑鼠，操作不便也浪費時間，為了改善使用者的體驗，我們可以讓使用者輸完使用者名稱後按enter鍵來切換到密碼處，方便快捷。

<!--這是最外層的父元素-->
<div class="login-form" onkeypress
 
="if(event.keyCode === 13){document.getElementById('username').focus();}else{document.getElementById('user_pwd').focus();}}"></div>

在input獲得焦點後，placeholder中的內容不會消失，若是給input內容居中（text-align: center）,在獲得焦點時就會很尷尬，一個字被拆分了，比如：

為了避免這種情況的發生，我們可以讓input在獲得焦點時，placeholder消失，比如這樣：

於是，我們可以這樣寫：

<input type
 
="password" class="form-control" name="password" id="user_pwd" autocomplete="off" placeholder='請輸入密碼,密碼不能少於4位' onfocus="this.placeholder=''" onblur="this.placeholder='{% trans "請輸入密碼" %}'">

整體寫下來就是：

<div class="login-form" onkeypress="if(event.keyCode === 13){document.getElementById('username').focus();}else{document.getElementById('user_pwd').focus();}}"
 
>
    <div class="form-group">
        <input type="text" class="form-control" name="username" id="username" placeholder="請輸入使用者名稱" autocomplete="off" onfocus="this.placeholder=''" onblur="this.placeholder="請輸入使用者名稱">
    </div>
    <div class="form-group password-group">
        <input type="password" class="form-control" name="password" id="user_pwd" autocomplete="off" placeholder='請輸入密碼,密碼不能少於4位' onfocus="this.placeholder=''" onblur="this.placeholder="請輸入密碼,密碼不能少於4位">
    </div>
</div>

歡迎批評~