关于js中的表单事件
表单结构如下所示:
<form >
<input type="text" name="txt" id="txt" value="" />
<input type="submit" name="sub" id="sub" value="提交" />
<input type="button" value="点击" name="button"/>
<input type="button" value="重置" name="resets"/>
<input type="reset" name="resets1" id="" value="重置" />
</form>
<script type="text/javascript">
var form=document.getElementsByTagName('form')[0];
/*当每次在输入框中输入内容时都会触发oninput事件*/
form.txt.oninput=function(){
console.log(this.value);
}
/*当在输入框中输入内容时,并不会马上触发onchange事件,而是当输入框失去焦点时就会触发onchange事件*/
form.txt.onchange=function(){
console.log(this.value);
}
/*在这里,onsubmit事件是form底下的一个事件,不是在submit按钮上,点击之前触发onsubmit事件,
因此可以有判断条件来限制输入框里面的内容,*/
form.onsubmit=function(ev){
ev.preventDefault();
if(!form.txt.value){
alert('请输入内容');
};
}
/*当使用submit提交按钮时,输入框的值和提交value值会在导航栏当中显示出来。显示在hash值当中,name=vale&name=value;
但是当按钮是button时,显示在地址栏中的只有txt的name=value,不会把button中的name和value值显示出去
submit()不会触发onsubmit事件,所以要先做验证,再用submit()方法提交*/
form.button.onclick=function(){
form.txt.value?form.submit():alert('请输入内容');
}
//重置表单
form.resets.onclick=function(){
form.reset();
}
//重置表单的第二种方式
form.resets1=function(){
}
关于js中的表单事件的更多相关文章
- 测试开发之前端——No5.HTML5中的表单事件
表单事件 由 HTML 表单内部的动作触发的事件. 适用于所有 HTML 5 元素,不过最常用于表单元素中: 属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange s ...
- JS中的表单验证+正则表达式
表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...
- vue.js中的表单radio,select,textarea的v-model属性的用法
只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...
- js中触发表单提交
html代码: <form action="/test/action" method="get" id="myForm"> &l ...
- 模拟js中注册表单验证
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 在JS中模拟表单的post提交,进行页面的跳转
原文链接:https://blog.csdn.net/jal517486222/article/details/83147761 /* *功能: 模拟form表单的提交 *参数: URL 跳转地址 P ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
随机推荐
- 把ipad作为电脑的第二显示器
需要:1,iPad 2,ios端需要软件idisplay(在pp助手里搜索idisplay下载即可) 3,windows需要软件iDisplay(链接http://www ...
- 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】
首先,把昨天那俩条sql语句的优化原因给大家补充一下,第一条效率极低,第二条优化后的,sql语句截图如下: 经过几个高手的评论和个人的分析: 第一条sql语句查询很慢是因为它首先使用了in关键字查询, ...
- Struts2入门(一)
今天学习Struts2首先struts是一个成熟的框架.Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Cont ...
- mysql5.6 主从复制
Master 192.168.59.128 Slave 192.168.59.129 默认认为已安装mysql5.6 mysql5.6 rpm安装配置 修改Master my.cnf文件 # ...
- linux压缩及vi操作
一:Linux的压缩方式 1.tar cvf 对文件进行压缩,tar cvf+压缩文件完成的命名+需要压缩的文件 2,tar -tf +命名的压缩文件:表示查看目录里面的内容 3,tar -xf 解压 ...
- 弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
- Swoole笔记(二)
本文示例代码详见:https://github.com/52fhy/swoole_demo. Task 我们可以在worker进程中投递一个异步任务到task_worker池中.此函数是非阻塞的,执行 ...
- python中文字符串编码问题
接口测试的时候,发现接口返回内容是uncodie类型但是包含中文.在使用print进行打印时输出提示错误: UnicodeEncodeError: 'ascii' codec can't encode ...
- JS实现AOP拦截方法调用
//JS实现AOP拦截方法调用function jsAOP(obj,handlers) { if(typeof obj == 'function'){ obj = obj.prot ...
- go 基础语法
时间有限,简单记一些常用的,麻烦的不写了 定义变量:可以连续定义,也可以单个定义 var a int int类型 var a="ds" 默认string类型 a:=&qu ...