改写Form的submit

表单的一些应用常识:

 1.在用户第一次提交完表单后应防止用户不耐烦而多次点击submit按钮,需要在onsubmit事件中制止用户的重复行为。

 2.不要简单粗暴的用reset()重置表单,如果用户不想填写可以给他一个返回上一页面的按钮,让其离开。

 3.通过触发阻止onsubmit事件的默认行为就可以阻止用户表单的提交。

 4.能够在用户输入完一个内容后焦点自动跳到下一个内容。

 5.除了select,其余有onchange事件的表单元素都是先触发onchang再触发onblur,前提是该表单内容有了改变且失去了焦点。

 6.J高三上说select的onchange不用失去焦点就能发生有误,因为选择本身就让select失去了焦点,因此select选项改变的时候,先触发onblur再触发onchange

(未完待续)

用户提出一个需求,要求在表单填写完毕后敲击回车弹出一个自定义的对话框,且不能提交。

于是这就需要改写form的onsubmit事件,简单粗暴看代码:

HTML结构

<form id="ifm" action="">
  <div>
   <label>姓名:</label>
   <input id="txtName" type="text" maxlength="16"  /><br />
   <label>年龄:</label>
   <input id="txtAge" type="text" /><br />
   <input type="submit" id="sum" />
  </div>
 </form>

JS语句

window.onload = function () {
            var of = document.getElementById('ifm');
            of.onsubmit = function () {//改写onsubmit事件
                var oDiv = document.createElement('div');
                var oIn = document.createElement('input');
                oIn.type = 'text';
                oDiv.appendChild(oIn);
                oDiv.className = "divs";
                document.body.appendChild(oDiv);
                oIn.focus();//将焦点转移到对话框中
                return false;//阻止默认行为,form默认提交后刷新页面
            };
        };

 

 

posted @ 2014-01-15 16:35  白菜帮子  阅读(1179)  评论(0编辑  收藏  举报