Django实战之搭建个人博客(回车触发点击篇)

Content

• Content
  • 用途简介
  • 开发环境
  • HTML部分
  • js部分
  • 你学到了吗?

---

---

该系列文章源码来自: 博主第一次手撸博客(Django)
温馨提示: 该系列教程不提供前端布局和美化方面的内容, 博主本行是后端, 在我的项目中前端部分采用的框架是 Materialize, 是谷歌 Material Design 设计风格的前端框架, 欲知详情请点击上方提供的仓库地址, 源码采用WTFPL许可证开源

---

用途简介

举个例子, 在登录界面, 众所周知, 我们可以使用 Tab键 来实现切换到下一个输入框的操作, 如果说能够实现按下回车键就能自动点击登录按钮, 那么用户的右手(或左手)就不需要在键盘和鼠标之间左右摇摆, 只需要这样一个微小的工作(-1s), 就能有效的提升用户体验, 何乐而不为呢?

---

开发环境

• 操作系统: Manjaro Linux 18
• Python版本: Python3

  提示: Manjaro把Python3作为默认的Python版本, 其他发行版可能默认版本是Python2, 如果默认为Python2, 以下出现的Python和pip命令请使用python3和pip3

• Django版本: v2.1.5
• jQuery版本: v3.3.1

---

HTML部分

<form class="col s-12" id="login-form">
    <input type="text" id="username" maxlength="8" required>
    <label for="username">用户名</label>
        
    <input type="password" id="password" maxlength="16" required>
    <label for="password">密码</label>
    
    <button type="button" id="login-button">登录</button>
    <button type="reset">重置</button>
</form>

友情提示: 本篇教程实现的功能与上一篇js表单判空有冲突(需要输入框外面点一下或者按一下Tab键才能触发change事件)

---

js部分

document.getElementById('password').onkeydown = function (e) {
    // 兼容FF和IE和Opera
    var theEvent = e || window.event;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code === 13) {
        document.getElementById('login-button').click(); //具体处理函数
        return false;
    }
    return true;
}

• keydown事件: 键盘的按键被按下, 就是字面意思
• code === 13: 判断是否是按下了回车键
• click(): 触发点击事件

没有什么好多做注解的地方, 就是原生js的写法, 不过, 有些同学可能就想问了, 为什么要对密码输入栏监听键盘按下事件? 我直接解答: 我设计的这个登录系统其实是专供博客系统的超级管理员使用的, 也就是我本人专用, 我的使用场景是 输入用户名 -> Tab键 一键切换到密码输入栏 -> 输入密码 -> 回车提交表单 -> 登录成功, 所以说, 只需要在输入密码的时候按下回车即可.

开发过程小记: 这个功能实际上是先于js表单判空想到并实现的, 然而当我做完js表单判空之后, 发现需要在输入框外面点一下鼠标或者按一下Tab键才能激活按钮, so, 有点小冲突, 幸运的是按下Tab键之后, 此时网页的焦点会自动切换到登录按钮上, 这时候按回车就是直接点击按钮了. 总的来说, 问题不大(其实有点大), 登录千万条, 安全第一条, 我们成年人要会取舍, 罢了罢了.

---

你学到了吗?