enter键切换焦点，input获得焦点后placeholder消失

最新推荐文章于 2023-04-06 16:05:37 发布

会飞的猪0629

最新推荐文章于 2023-04-06 16:05:37 发布

阅读量1.2k

点赞数

分类专栏：闲杂文章标签：用户体验密码鼠标 focus

本文链接：https://blog.csdn.net/liyy_sd/article/details/78580308

版权

闲杂专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求：充分考虑用户体验，输入用户名和密码时，不用按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消失，比如这样：
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>