JavaScript DOM表单相关操作之表单相关事件

1、焦点事件

焦点事件就是鼠标的光标事件,点到输入框中,叫做获得焦点事件,当鼠标离开这个输入框时叫做失去焦点事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <h3>输入框获得和失去焦点触发对应的事件</h3>
    <input type="text" name="username">
</form>
</body>
<script>
    var obj= document.getElementsByName('username')[0]; // 获取表单元素对象
    obj.onfocus = function (){
        console.log('获得焦点');
    }
    obj.onblur = function (){
        console.log('失去焦点');
    }
</script>
</html>

2、onchange事件

在实际项目开发中,有关表单方面还有一个radio和checkbox类型的表单选中事件也非常常用

// onchange事件在radio表单类型中的应用
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <h3>radio触发onchange事件</h3>
    <input type="radio" name="sex" value="男" onchange="change(this)"><br>
    <input type="radio" name="sex" value="女" onchange="change(this)"><br>
</form>
</body>
<script>
    function change(obj){
        var value = obj.value; // 获取对象的值
        console.log(value); // 打印获取的值
    }
</script>
</html>

// onchange事件在checkbox表单类型中的应用
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <h3>checkbox触发onchange事件</h3>
    <input type="checkbox" name="hobby" value="Python" onchange="change(this)">Python<br>
    <input type="checkbox" name="hobby" value="PHP" onchange="change(this)">PHP<br>
</form>
</body>
<script>
    function change(obj){
    	if (obj.checked == true){
			var value = obj.value; // 获取对象的值
        	console.log(value); // 打印获取的值
		}
    }
</script>
</html>

// onchenge事件在select下拉框中的使用
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <h3>select触发onchange事件</h3>
    <select name="city" id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
</form>
</body>
<script>
    // 获取select选择框对象
    var obj = document.getElementsByName('city')[0];
    // 绑定onchange事件
    obj.onchange = function (){
        console.log(this.value);
    }
</script>
</html>

3、表单提交事件

onsubmit事件会在我们点击submit类型的按钮时被触发,这个事件经常被用在表达提交的时候进行数据验证,当用户提交的数据不合法时则拒绝提交。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form id="myForm" action="https://www.zhishunet.com">
    <h3>submit按钮触发onsubmit事件</h3>
    <input type="submit" value="提交表单">
</form>
</body>
<script>
    // 获取form表单
    var obj = document.getElementById('myForm');
    obj.onsubmit = function (){
        console.log('您点击了submit按钮');
        return false;  // 返回false阻止提交
    }
</script>
</html>

// 注意
// onsubmit事件必须让这个事件返回false才能阻止表单的提交

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/340185.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络安全——密码学入门

网络安全是指在网络领域、专业领域的网络安全包括在基础计算机网络基础设施中所做的规定&#xff0c;网络管理员采取的策略来保护网络及网络可访问资源免受未经授权的访问&#xff0c;以及对其有效性&#xff08;或缺乏&#xff09;的持续不断的监控和测量的结合。 1. 密码学的…

什么是网络安全?网络安全概况

网络安全涉及保护我们的计算机网络、设备和数据免受未经授权的访问或破坏。 这个领域包括多种技术、过程和控制措施&#xff0c;旨在保护网络、设备和数据免受攻击、损害或未授权访问。网络安全涉及多个方面&#xff0c;包括但不限于信息安全、应用程序安全、操作系统安全等 …

K8S搭建(centos)二、服务器设置

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

“gradle project sync failed”

很久没打开AndroidStudio了&#xff0c;打开电脑发现这个软件都没了。重新安装后创建项目不成功&#xff0c;就提示了这个错误。 错误原因 “gradle project sync failed”&#xff1a;gradle没有配置成功。在安卓项目下找到目标文件&#xff1a;gradle --> wrapper -->…

HarmonyOS 发送http网络请求

好 本文 我们来说 http请求 首先 我们要操作网络内容 需要申请权限 项目中找到 main目录下的module.json5 最下面加上 "requestPermissions": [{"name": "ohos.permission.INTERNET"} ]这里 我在本地写了一个get接口 大家可以想办法 弄一个后…

【JavaEE进阶】 关于⽇志框架(SLF4J)

文章目录 &#x1f333;SLF4j&#x1f332;⻔⾯模式(外观模式)&#x1f6a9;⻔⾯模式的定义&#x1f6a9;⻔⾯模式的优点 &#x1f343;关于SLF4J框架&#x1f6a9;不引⼊⽇志⻔⾯&#x1f6a9;引⼊⽇志⻔⾯ ⭕总结 &#x1f333;SLF4j SLF4J不同于其他⽇志框架,它不是⼀个真正…

基于 GPT 和 Qdrant DB 向量数据库, 我构建了一个电影推荐系统

电影推荐系统自从机器学习时代开始以来就不断发展&#xff0c;逐步演进到当前的 transformers 和向量数据库的时代。 在本文中&#xff0c;我们将探讨如何在向量数据库中高效存储数千个视频文件&#xff0c;以构建最佳的推荐引擎。 在众多可用的向量数据库中&#xff0c;我们将…

【Linux】Shell 命令以及运行原理

Shell 命令以及运行原理 当用户登录 Linux 系统的时候&#xff0c;系统会给用户创建一个新的进程&#xff0c;一般叫做 bash&#xff08;命令行解释器&#xff09;。 Linux 严格意义上说的是一个操作系统&#xff0c;我们称之为 “核心&#xff08; kernel &#xff09;” &…

Paimon教程

教程来自尚硅谷 目录 教程来自尚硅谷1. 概述1.1 简介1.2 核心特性1.3 文件布局1.3.1 LSM Trees 2. 集成Flink2.1 安装&配置2.2 Catalog 3. 进阶使用3.1 写入性能3.1.1 并行度3.1.2 Compaction3.1.3 触发Compaction的Sorted Run数3.1.4 写入初始化3.1.5 内存 3.2 读取性能3.…

在Windows 11上安装Domino 14和Traveler 14

大家好&#xff0c;才是真的好。 是的&#xff0c;没错&#xff0c;在过去&#xff0c;很多人都喜欢将他们的Domino服务器安装在自己的pc电脑和个人操作系统上&#xff0c;从遥远的windows 2000、xp&#xff1b;windows 7以及到现在的Windows 10和11。 这也造成了在使用Domin…

【设计模式】代理模式的实现方式与使用场景

1. 概述 代理模式是一种结构型设计模式&#xff0c;它通过创建一个代理对象来控制对另一个对象的访问&#xff0c;代理对象在客户端和目标对象之间充当了中介的角色&#xff0c;客户端不再直接访问目标对象&#xff0c;而是通过代理对象间接访问目标对象。 那在中间加一层代理…

抓包工具Fidder

介绍 Fiddler是强大的抓包工具&#xff0c;它的原理是以web代理服务器的形式进行工作的&#xff0c;代理地址&#xff1a;127.0.0.1&#xff0c;默认端口号:8888。代理就是在客户端和服务器之间设置一道官咖&#xff0c;客户端将请求数据发送出去之后&#xff0c;代理服务器会…

为什么电脑降价了?

周末&#xff0c;非常意外地用不到3000元买到了一款2023年度发布的华为笔记本I5,16G,500G&#xff0c;基本是主流配置&#xff0c;我非常意外&#xff0c;看了又看&#xff0c;不是什么Hwawii&#xff0c;或者Huuawe。然后也不是二手。为什么呢&#xff1f;因为在ALU和FPU之外&…

一零七七、将Hexo cl Hexo g Hexo s通过systemctl命令管理

背景&#xff1a; 服务器需要执行hexo s来运行项目&#xff0c;但这个命令是基于前台的&#xff0c;故想直接嫁接在systemctl命令基础上来控制环境&#xff1a; Centos 8 前置环境就不说了,Hexo安装好&#xff0c;起码装完自己得先看hexo命令生效没&#xff0c;前置环境做好后…

项目篇:基于UDP通信模型的网络聊天室

思维导图 基于UDP通信模型的网络聊天室 消息分类及数据包结构 服务器端 #include <head.h> #define SER_PORT 8888 #define SER_IP "192.168.232.133" typedef struct mb {struct sockaddr_in cin;char name[20];struct mb *next; }*member; //群发消息 int …

【英文干货】【Word_Search】找单词游戏(第1天)

本期主题&#xff1a;Mindfulness&#xff08;意识力&#xff09; 本期单词&#xff1a; Awareness 意识 Breathing 呼吸 Calm 平静的 De-Stress 减压 Feelings 感受&#xff0c;情感 Inspection 调查 Meditation 冥想 Peace 和平 Quiet 安静的 Recollection 回忆 R…

当世界加速离你而去

当世界加速离你而去 会不会这个标题显的太悲观&#xff0c;也可能是耳机里正在放着To Be Frank的原因。 对于阳历跨年我是没有太多的感觉&#xff0c;而且跨年夜忙着约会&#xff0c;所以2023年的跨年文章今天才出来。 一年的时间一晃就过了。2022年12月9日时候彻底结束了风控…

ELK 分离式日志(1)

目录 一.ELK组件 ElasticSearch&#xff1a; Kiabana&#xff1a; Logstash&#xff1a; 可以添加的其它组件&#xff1a; ELK 的工作原理&#xff1a; 二.部署ELK 节点都设置Java环境: 每台都可以部署 Elasticsearch 软件&#xff1a; 修改elasticsearch主配置文件&…

FOR XML PATH 函数与同一分组下的字符串拼接

FOR XML PATH 简单介绍 FOR XML PATH 语句是将查询结果集以XML形式展现&#xff0c;通常情况下最常见的用法就是将多行的结果&#xff0c;拼接展示在同一行。 首先新建一张测试表并插入数据&#xff1a; CREATE TABLE #Test (Name varchar(70),Hobby varchar(70) );insert #T…

EHS管理系统为何需要物联网的加持?

EHS是Environment、Health、Safety的缩写&#xff0c;是从欧美企业引进的管理体系&#xff0c;在国外也被称为HSE。EHS是指健康、安全与环境一体化的管理。 而在国内&#xff0c;整个EHS市场一共被分成三类&#xff1b; 一类是EHS管培体系&#xff0c;由专门的EHS机构去为公司…