关于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 ...
随机推荐
- java 空指针异常造成的原因有哪些
实际上 空指针异常 也就是你用了一个没有实际值的对象 1. 某一对象没有被实例化,就拿来使用,如调用此对象的方法,会抛空指针异常. 2. 获取从别的对象传过来的对象为空 3. 数据库查询方面的空指 ...
- CentOS上安装NodeJs
(1)参照:http://www.cnblogs.com/zhangqingsh/archive/2013/04/15/3022583.html 安装Python2.7 (2)安装Nodejs yu ...
- grok 匹配log4j
input { file { codec => multiline { pattern => "^\[2016" negate => true what => ...
- poi合并单元格同时导出excel
poi合并单元格同时导出excel POI进行跨行需要用到对象HSSFSheet对象,现在就当我们程序已经定义了一个HSSFSheet对象sheet. 跨第1行第1个到第2个单元格的操作为 sheet ...
- java设计模式面试考点
分类(常见的设计模式) 1.创建型模式 a) 工厂模式 b) 抽象工厂模式 c) 单例模式 d) 建造者模式 2.结构型模式 a) 适配器模式 b) 装饰器模式 c) 桥接模式 d) 代理模式 3.行 ...
- MySql的学习笔记
良好的理解sql语句: 列:理解可以运算的成变量 where: 理解成表达式,放在行中看是否成立 查出来的结果可以当成一张表理解,select 套用select综合查询: 五种查询 where g ...
- Python使用PyMysql操作数据库
安装 pip install -U pymysql 连接数据库 连接数据库有两种不同的格式 直接使用参数 代码如下 import pymysql.cursors connection = pymysq ...
- vue-router单页应用简单示例(二)
我们先来理一下思路. 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app,将App.vue中的模版渲染到入口界面(就是打开localhost ...
- C#中==运算符
在这篇博客中,我们将介绍如下内容: ==运算符与基元类型 ==运算符与引用类型 ==运算符与String类型 ==运算符与值类型 ==运算符与泛型 ==运算符与基元类型 我们分别用两种方式比较两个整数 ...
- 细说Nullable<T>类型
目录一.简介二.语法和用法三.类型的转换和运算四.装箱与拆箱五.GetType()方法六.ToString()方法七.System.Nullable帮助类八.语法糖 一.简介 众所周知,值类型变量不能 ...