关于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 ...
随机推荐
- 【WPF】如何获取命令行参数
应用程序以 Main 方法为入口点,如果为 Main 方法指定一个 string[] 类型的参数,在程序运行时,这个参数会获取到传递给应用程序的命令行参数. 而 WPF 应用程序比较特殊,因为在VS中 ...
- {网络编程}和{多线程}应用:基于TCP协议【实现多个客户端发送文件给一个服务器端】--练习
要求: 实现多个客户端发送文件给一个服务器端 提示:多个人创建客户端发送文件,服务端循环接收socket,从socket中获取文件 说明:这里我们只要建立一个服务端就可以了,然后让多台电脑使用客户端给 ...
- javaSE_06Java中的数组(array)-练习
(1),数组的两种遍历方式,顺序查找,二分查找,求最大最小数,冒泡排序,选择排序. public class Test1{ public static void main(String[] args) ...
- Dom元素的Property和Attribute
Attribute就是DOM节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这个DOM元素作为对象,其附加的内容,例如childNodes.fir ...
- sql 经典面试题
如果数据库里两个日期型字段d1,d2,怎样用sql语句列出按月的所有区间,比如表结构如下localid d1 d21 2014-1-15 2014-3- ...
- es6之各种数据类型的扩展
一. 字符串的扩展 为字符串添加了Iterator,可以被for...of遍历 includes.startsWith.endsWith都会返回布尔值,且支持第二个参数(开始搜索的位置),endsWi ...
- C# 中文在URL中的编码
UTF-8中,一个汉字对应三个字节,GB2312中一个汉字占用两个字节. 不论何种编码,字母数字都不编码,特殊符号编码后占用一个字节. //按照UTF-8进行编码 string tempSearc ...
- Bootstrap 常用组件汇总
Bootstrap 官方文档:http://www.bootcss.com/ Bootstrap Multiselect 多选下拉组件 官方文档:http://www.kuitao8.com/demo ...
- php 数据访问基础
<?php // 创建数据库连接 $con = mysql_connect("localhost",'root','') or die('error:'.mysql_erro ...
- 为网页生成二维码(jquery.qrcode.min.js)
做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...