表单事件属性

最新推荐文章于 2023-04-12 11:07:26 发布
最新推荐文章于 2023-04-12 11:07:26 发布
阅读量2.8k 收藏 2
点赞数 2
分类专栏： javascript事件处理 文章标签： 表单 事件处理
表单事件是由HTML表单内部的动作触发事件，适用于所有的HLML5元素，主要用于表单元素中。表单事件属性如下所示：
onblur :当元素失去焦点时触发事件
onchange :当元素改变时触发事件
oncontextmenu :当触发上下菜单时触发事件
onfous:单元素获得焦点时触发事件
onformchange :当标的改变时触发该事件
onforminput：当表单获得用户输入时触发事件
oninput :当元素获得用户输入时触发事件
oninvalid: 当元素无效时触发事件

onselect :当选取元素时触发事件

onsubmit 当提交表当时触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单事件实例</title>
		<script type="text/javascript">
			function p1(obj){
				obj.select();
				obj.style.color="#000";
			}
			function p2(obj){
				if(obj.value==""){
					obj.value=="请选择城市"
					obj.style.color="#999";
				}
			}
			function p3(obj){
			document.getElementById('text1').value=obj.value
			document.getElementById('text1').style.color="#000";
			}
		</script>
	</head>
	<body>
		<input type="text" id="text1" onfous="p1(this)" value="选择城市"
		style="color:#999" οnblur="p2(this)">
		<select type="select" name=s1 οnchange="p3(this)">
			<option selected value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="福建">福建</option>
		</select>
	</body>
</html>
当输入框text1获取焦点时，选中其中的文本，输入框text1的颜色变为黑色：当光标离开输入框text1时，如果它的内容为空，则修改其值为“选择城市”，字体颜色为灰色。但从下拉列表选择不同的城市时，在文本中显示选中的城市，并将字体颜色变为黑色。

203最强
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript基础知识
harborian的博客
10-08 166
javascript基础知识 1 概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说j...
表单元素属性和事件
sunset的博客
07-27 1188
关掉input烦人的自动提示 给input添加autocomplete="off"即可 &lt;input type="text" id="username" autocomplete="off"&gt; 设置元素不可交互(input,select等表单元素) 添加disable属性 &lt;button id="regist-btn" disabled&quo
表单相关事件
resoursekey的博客
07-06 342
表单事件实际上就是对元素获得或失去焦点的动作进行控制。获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。下例是用户选择页面中的文本框时，改变文本框的背景颜色为淡蓝色，当选择其他文本框时，将失去焦点的文本框背景颜色回复原始状态。程序代码如下。&lt;table allign="...
elementUI From表单踩坑之watch 变量监控（解决方法：@change=“nameChange”事件）
陈浩然哦 的博客
07-01 3546
- 当修改input框内的值（form.name）的时候，watch 监控from失败，watch中的from不相应，打印无效； <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-fo
antd 之 Form 表单·记
青蛙king的博客
02-04 1500
同一个 Form 下的两个 Form.list，如何在第二个Form.list中使用第一个Form.list的添加的所有数据？ Form.provider 提供了两个form之间共享数据的途径。所以我用了它，但是在Form.provider的onFormChange事件中：Form.provider 仅仅提供第一层的name及其对应的value，也就是Form.list的name和value，取不到更深一层的Form.item的name和value。 抛开Form.provider，现在这两个Form已
在react antd中动态生成多个 form表单组，包括一个动态添加/删除表单项的功能和一个提交表单的功能
weixin_38791717的博客
04-12 4633
方法，动态添加一个新的表单项。当用户提交表单时，将会调用。属性来指定占位文本。在每个表单项的最后，我们使用。组件来实现删除表单项的功能。在表单的最后，我们使用。方法，打印所有表单项的内容。在输入框中，我们使用。组件来实现提交表单的功能。方法循环渲染每个表单项，并使用。组件来动态生成多个表单项。属性指定表单项的名称，使用。在这个示例中，我们首先使用。组件包裹每个表单项。
javascript表单事件处理方法详解
10-22
JavaScript是Web开发中不可或缺的一部分，尤其在处理用户交互时，如表单事件。表单是网页中最常见的元素之一，用于收集用户输入的数据。本篇文章将深入探讨JavaScript如何处理表单事件，以帮助开发者更好地理解这一...
C++属性表单.rar
11-28
C++属性表单的编写，基于对话框的属性表单。选择兴趣爱好、职业等后用MessageBox弹出所做选择。
JavaScript获取网页表单action属性的方法
10-24
主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
html表单属性readonly和disabled的使用方法
09-28
- `readonly` 属性用于设置表单元素为只读状态。这意味着用户可以看到元素中的文本，但不能修改它。当用户尝试改变只读字段的值时，浏览器通常会阻止这种行为，但用户仍然可以通过其他方式（如JavaScript）改变其值...
jquery动态改变form属性提交表单
10-25
在js中动态改变form的属性，满足不同条件的form提交需求，下面有个不错的示例，大家可以参考下
js系列教程8-事件全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-09 3854
printf("===========事件绑定==========="); //时间可以在h5代码中直接添加也可以在js代码中添加 var input1=document.getElementById("input1"); input1.onclick = function(event){ //事件也是元素对象的方法属性，可以直接设置和调用input1.onclick(),删除input1.on
jQuery表单事件change事件
qq_43742368的博客
05-30 561
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="../jquery-1.10.2.min.js"></
change事件
qq_43654065的博客
12-30 8938
change事件是jQuery表单事件，多用于<input>、<select>、<textarea>标签，通过change事件监听从而实现相应的动作。 1. input标签 监听input值的变化，当值发生变化，失去焦点后触发change事件。对于单选框和复选框，当用户鼠标做出选择时，立即触发change事件； 2. select标签 对于下拉选择框，当用户做出选择时，立即触发change事件； 3. textarea标签 监听textarea值的变化，当值发生变化，失去
layui 下拉列表的change事件
热门推荐
尼古拉斯鹏
03-29 3万+
layui下拉列表的事件不能用jq的change 应该用自带的方式写默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。如：&lt;select lay-filter="test"&gt;&lt;/select&gt;监听select下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：注意：form.render('select')...
Spring MVC表单控制器SimpleFormController 流程解说
EvelynHouseba的专栏
03-27 1738
以注册为例：   1、当表单控制器接收到一个请求时，请求控制器会先判断请求类型，进入handleRequestInternal()【因为Controller继承SimpleFormController，其又继承AbstractFormController抽象类，抽象类里有该方法】 2、handleRequestInternal()方法首先调用isFormSubmission()判断是否为
HTML5新增标签 表单 属性 事件
蒲公英芽的博客
03-02 629
HTML5简介 HTML5是HTML最新的修订版本，2014年10月由W3C（万维网联盟）完成标准制定。 HTML5是W3C与WHATWG（指Web Hypertext Application Technology Working Group）合作的结果。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML，也就是现在...
form表单的属性
最新发布
05-29
HTML中的form表单有一些常用的属性，这里简单介绍一下： ...这些属性可以在表单的`<form>`标签中设置，例如： ```html <!-- 表单内容 --> ``` 在实际使用中，可以根据具体需求选择需要的属性设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值