表单元素事件

最新推荐文章于 2024-09-02 17:34:07 发布

在下河南彭于晏

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量54

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/da_shuai_bi_a/article/details/129899732

版权

focus: 获取焦点
blur: 失去焦点
change: 内容有变化
input: 实时输入
keyUp: 按键抬起
- 利用事件参数中的 keyCode 识别具体的按键

表单元素事件的运用算是比较广泛的,且贴切用户的生活;打开任何一个软件,第一个弹出来的绝对是登入界面,然而进入一个陌生软件定然是要注册一个账户的,这时候就需要填写用户的基本信息,用表单元素就可以轻易获取到用户输入的内容和获失焦点

 // 1. 获得焦点 focus
    inp1.onfocus = function () {
      console.log('获得焦点 focus')
    }
    // 2. 失去焦点 blur
    inp1.onblur = function () {
      console.log('失去焦点 blur')
    }
    // 3. 内容变化 change
    // 内容变更后, 按回车 或 失去焦点时触发
    inp1.onchange = function () {
      // 单标签的值存储在 value 属性
      console.log('内容变化 change: ', this.value);
    }

    // 4. 内容输入 input
    inp1.oninput = function () {
      console.log('输入内容 input:', this.value)
    }

    // 5. 键盘事件 keyup
    // 事件参数: 由系统触发的事件, 默认会把本次事件相关联的信息 作为参数传递到事件方法中
    // 形参名: event事件. 习惯上会缩写为 e
    inp1.onkeyup = function (e) {
      console.log(arguments)
      console.log('按键抬起 keyup:', e)

以下是一个例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 10:00</title>

  <style>
    input {
      padding: 5px;
      border: 1px solid #333;
      outline: none;
      border-radius: 3px;
    }

    input:focus {
      border-color: blue;
    }

    td {
      vertical-align: top;
    }

    /* 如果 输入框 带有 ok 样式, 则 div.ok 应该显示 */
    input.ok~div.ok {
      display: block;
    }

    /* ~ : 下方所有兄弟元素 */
    input.err~div.err {
      display: block;
    }

    input.err {
      border-color: red;
    }

    div.err {
      color: red;
      display: none;
    }

    div.ok {
      color: green;
      display: none;
    }
  </style>
</head>

<body>
  <!-- 对于存在隐藏效果的元素, 都应该先在HTML中书写 -->
  <table>
    <tbody>
      <tr>
        <td>手机号</td>
        <td>
          <input type="text" placeholder="可用于登录和找回密码">
          <div class="err">手机号码格式不正确</div>
          <div class="ok">手机号正确</div>
        </td>
      </tr>
    </tbody>
  </table>

  <script>
    // 当光标从输入框离开 - 失去焦点. 检查内容是否为手机号码格式
    const inp = document.querySelector('input')

    inp.onblur = function () {
      // 如果没有输入值, 则不进行检查!
      if (this.value == '') return

      // 利用 正则表达式 验证字符串格式
      if (/^1[3-9]\d{9}$/.test(this.value)) {
        this.classList.add('ok')
      } else {
        this.classList.add('err')
      }
    }

    // 获取焦点时: 清空之前的样式类
    inp.onfocus = function () {
      this.className = '' //因为是清空操作, 不需要什么技巧, 直接操作原始值
    }
  </script>

</body>

</html>

案例的基本样式

输入错误的手机号码格式

输入正确的号码格式

在定义手机号码格式正确与错误时,需用到正则表达式

在下河南彭于晏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单元素事件

表单元素事件的运用算是比较广泛的,且贴切用户的生活;打开任何一个软件,第一个弹出来的绝对是登入界面,然而进入一个陌生软件定然是要注册一个账户的,这时候就需要填写用户的基本信息,用表单元素就可以轻易获取到用户输入的内容和获失焦点。利用事件参数中的 keyCode 识别具体的按键。在定义手机号码格式正确与错误时,需用到。change: 内容有变化。focus: 获取焦点。input: 实时输入。keyUp: 按键抬起。输入错误的手机号码格式。blur: 失去焦点。
复制链接

扫一扫