js笔记--表单

标签：

1.表单基础知识

一：document.getElementById("id");

二：document.forms[0] 或  document.forms["formname"]

1.提交表单

	<!-- 通用提交按钮-->
	<input type="submit" value="submit">
	<button type="submit">submit</button>
	<!--图像按钮提交表单-->
	<input type="image" src="flag.png">

提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。可以在事件处理程序中验证表单数据。阻止事件的默认行为可以取消表单提交。

	var form = document.forms["myform"];
	console.log(form);
	EventUtil.addHandler(form,"submit",function(event){
		console.log(event);
		//取消表单提交
		event.preventDefault();
	});
	//直接调用submit()方法提交表单。不会触发submit事件
	form.submit();

表单重复提交问题：解决方法，在第一次提交表单后禁用提交按钮。或利用onsubmit事件处理程序取消后续的表单提交操作

2.重置表单

使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。

	<input type="reset" value="重置">
	<button type="reset">重置</button>

重置会触发reset事件，可以在事件处理程序中取消重置

	var form1 = document.forms["myform"];
	EventUtil.addHandler(form1,"reset",function(event){
		//阻止reset事件默认行为
		event.preventDefault();
	});

form.reset()方法重置表单会触发reset事件

3.表单字段

每个表单都有elements属性，该属性是表单中所有元素的集合(<input>,<textarea>,<button>,<fieldset>)。这个集合是一个有序列表，每个表单字段在集合中的顺序就是它们出现在标记中的顺序。可按照位置和name特性来访问它们。

	var form1 = document.forms["myform"];
	//获取表单中的第一个字段
	var field1 = form1.elements[0];
	//根据属性名获取表单元素
	var field2 = form1.elements["username"];

	var fieldCount = form1.elements.length;
	console.log(field1);
	console.log(field2);
	console.log(fieldCount);

1.共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。

• disabled：表示当前字段是否被禁用
• form：指向当前字段所属表单的指针；只读
• name：字段名称
• readOnly：只读
• tabIndex：当前字段的切换(tab)序号
• type：当前字段的类型
• value：当前字段提交给服务器的值。对文件字段来说，这个属性是只读的

	var form1 = document.forms["myform"];
	var field1 = form1.elements[0];
	var fields = form1.elements;
	console.log(field1.form === form1); //true

	//监听表单提交事件
	EventUtil.addHandler(form1,"submit",function(event){
		var submitForm = event.target;
		var btn = submitForm.elements["submit_btn"];
		//提交表单时让提交按钮不可用
		btn.disabled = true;
		event.preventDefault();
	});

2.公有的表单字段方法

focus()和blur()

页面加载完后焦点移到第一个字段  html5   autofocus属性，布尔值，自动聚焦。

	EventUtil.addHandler(window,"load",function(){
		var element = document.forms[0].elements[0];
		if(element.autofocus !== true){
			element.focus();
		}
	});

3.共有表单字段事件

blur：

change：

focus：

2.文本框脚本

获取焦点时选中文本内容

1.屏蔽字符

	var username = document.forms[0].elements["username"];
	EventUtil.addHandler(username,"keypress",function(event){
		var charCodeStr = String.fromCharCode(event.charCode);
		console.log(charCodeStr);
		//如果是非数字，且不是向上向下，空格等键,没有按下Ctrl键（复制，粘贴）
		if(!/\d/.test(charCodeStr)&&event.charCode>9&&!event.ctrlKey){
			event.preventDefault();
		}
	});

2.自动切换焦点

//当前文本框输入完成后自懂焦点切换到下一个元素

	(function(){
		function tabForward(event){
			var target = event.target;
			//如果输入完成
			if(target.value.length == target.maxLength){
				var form = target.form;
				for(var i=0;i<form.elements.length;i++){
					if(form.elements[i] == target){
						if(form.elements[i+1]){
							form.elements[i+1].focus();
						}
						return;
					}
				}
			}
		}
		var text = document.forms[0].elements["username"];
		EventUtil.addHandler(text,"keyup",tabForward);
	})();

3.html5约束验证

1.必填字段  required

<input name="username" type="text" value="hehe" maxlength="3" required>

2.其他输入类型

	<input name="email" type="email">
	<input name="url" type="url">

3.输入模式  pattern

接收正则表达式

<input name="username1" type="text" pattern="\d+">

4.检测有效性

checkValidity()检测表单中的某个字段是否有效

	var form = document.forms[0];
	form.checkValidity();//表单所有元素验证通过才返回true
	EventUtil.addHandler(form,"submit",function(event){
		var username = document.forms[0].elements["username"];
		if(username.checkValidity()){
			//有效
			console.log("正确");
			event.preventDefault();
		}else{
			//无效，表单不提交
			console.log("错误");
			event.preventDefault();
		}
	});

5.禁用脚本
通过设置表单的novalidate属性

如果表单有多个提交按钮，可以指定某个提交按钮不验证表单。通过在按钮上添加formnovalidate属性。

	var form = document.forms[0];
	form.novalidate = true;//禁用验证

3.选择框脚本

方式一：

		var selectbox = document.forms[0].elements[0];

		var option = document.createElement("option");
		option.value="5";
		option.text = "sun qi";
		selectbox.appendChild(option);

方式二：使用Option构造函数来创建新选项

		var option1 = new Option("qianba","6");
		selectbox.appendChild(option1);

方式三：使用选择框的add()方法，接收两个参数，一：添加的选项。二：位于新选项后的选项。跨浏览器在最后添加选项，第二个参数给undefined

		var selectbox = document.forms[0].elements[0];
		var option = new Option("ethan","5");
		selectbox.add(option,undefined);//最佳方案

3.移除选项

使用DOM的 removeChild()

选择框的remove(index)方法

		selectbox.removeChild(selectbox.options[0]);
		selectbox.remove(0);

4.移动和重排选项

移动和移除选项都会重置每个选项的index属性

insertBefore();在指定元素前插入要移动的选项

		var optionToMove = selectbox.options[0];
		selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);

4.表单序列化

DOM兼容的浏览器中使用hasAttribute()来获取属性值，IE中使用specified属性来判断

如果表单中包含<fieldset>元素，该元素会出现在元素集合中，type属性不存在。因此，如果type属性未定义，就不需要对其进行序列化。

5.富文本编辑

			EventUtil.addHandler(window,"load",function(){
				var frame = window.frames["richedit"];
				frame.document.designMode = "on";
			});
		</script>
	<body>
		<iframe name="richedit" src="h2.html" style="width:300px;height:300px;" />

1.使用contenteditable属性

<div id="editDiv" contenteditable>hehe</div>

属性可以给页面中任何元素使用(使该元素可编辑)

		var div = document.getElementById("editDiv");
		div.contentEditable = "true";
		div.contentEditable = "false";

true：打开。false：关闭。inherit：从父元素那里继承

2.操作富文本

document.execCommand()方法可以对文档执行预定义的命令。

3个参数：一，要执行的命令名称;二，浏览器是否提供界面(false)；三，执行命令必须的值(不需要值就传递null)

	EventUtil.addHandler(window,"load",function(){
		var richEditFrame = window.frames["richEdit"];
		richEditFrame.document.designMode  = "on";
		richEditFrame.document.execCommand("bold",false,null);
		richEditFrame.document.execCommand("createlink",false,"http://www.baidu.com");
		var div = document.getElementById("editDiv");
		div.contentEditable = "true";
		document.execCommand("bold",false,null);
	});

3.表单与富文本

由于富文本编辑是使用iframe而非表单控件实现的。要提交富文本编辑中的内容，需要我们手工提取并提交HTML。通常添加一个隐藏字段，在表单提交前，将从iframe中提取的HTML赋值给隐藏字段。

js笔记--表单

标签：

原文地址：http://blog.csdn.net/lvsongsng91/article/details/51851423