javascript---表单介绍

Posted 2020-07-02

首先上来一个干货：

跨浏览器阻止默认行为：

1         function preDef(evt){
2             var e=evt||window.event;
3             if(e.preventDefault){
4                 e.preventDefault();
5             }else{
6                 e.returnValue=false;
7             }
8         }

通俗的讲就是阻止这个东西的本来的功能，例如：a标签的默认行为是点击跳转到其他URL，而阻止默认行为则是不跳转。

 

---

 

我们进入正题，表单：

1.表单提交

 1         addEvent(window,‘load‘,function(){
 2             var fm=document.getElementById(‘myForm‘);
 3             
 4             //阻止提交
 5             addEvent(fm,‘submit‘,function(evt){
 6                 preDef(evt);
 7             });
 8             //疑问：submit事件为什么要用form对象来触发？为什么不能使input中的submit
 9             
10             //PS：把submit事件注册到input中的submit按钮是无法触发submit事件的
11             //PS：必须把submit事件绑定到form对象上才可以触发submit事件
12             //PS：只不过触发submit事件的流程是点击input中的submit按钮而已
13         });

总结：提交表单我们要绑定的是表单form元素的提交事件，而不是绑定input[type=‘submit]‘。

不过，也能使不是submit按钮可以提交表单。就是加

fm.submit();

---

 

2.表单控件：

form里面的input submit textarea select

1     addEvent(window,‘load‘,function(){
2             var fm=document.getElementById(‘myForm‘);
3             alert(fm.elements);                //表单控件集合，其他元素会被忽略
4             //alert(fm.length);                //向下兼容，不推荐
5             alert(fm.elements.length);            //推荐
6             alert(fm.elements[0]);    
7             alert(fm.elements[‘user‘]);            //如果有相同的name，那么会得到数组    
8         });

 

表单字段属性：

value

name

type

form

1     addEvent(window,‘load‘,function(){
2             var fm=document.getElementById(‘myForm‘);
3             alert(fm.elements[1].value);
4             alert(fm.elements[1].name);
5             alert(fm.elements[1].type);
6             alert(fm.elements[1].form);                //得到从属的form对象
7             fm.elements[1].disabled=true;
8         });

 

表单字段方法：

focus()　　将焦点移入

blur()　　将焦点移出

 

共有表单字段事件

onblur

onchange

onfocus