前端基础 - JavaScript之表单获取焦点及失去焦点

简介: 前端基础 - JavaScript之表单获取焦点及失去焦点

表单获取焦点及失去焦点

方法:

获取焦点方法: onfocus()

失去焦点方法: onblur()

效果图如下:

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      function userNameOnFocus() {
        alert("用户名获取焦点");
      }
      function passOnBlur() {
        alert("密码失去焦点");
      }
      function login() {
        alert("登录");
      }
    </script>
  </head>
  <body>
    <table>
      <tr style="clear: both;">
        <td>用户名:</td>
        <td><input id="userName" "userNameOnFocus()"></td>
      </tr>
      <tr>
        <td>密码:</td>
        <td><input id="passWord" "passOnBlur()"></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="登陆" "login()" /> </td>
      </tr>
    </table>
  </body>
</html>
目录
相关文章
|
23天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
45 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
52 0
|
1月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
27 1
|
1月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
2天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
16 5
|
26天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
29 0
|
1月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
19 0