重看Javascript高级程序设计，第14章:表单脚本

//js中表单对应的是HTMLFormElement.继承自HTMLElement,自己独有的属性如下
			//acceptCharset 		服务器能够处理的字符集,等价于HTML中的accept-charset特性.
			//action				接收请求的url,等价于HTML中的action特性.
			//elements				表单中所有控件的集合
			//enctype				请求的编码类型,等价于HTML中的enctype
			//length				表单中控件的数量
			//method				要发送的HTTP请求类型,通常是"get"或"post",等价于HTML的method特性.
			//name 					表单的名称.
			//reset 				将所有表单域重置为默认值.
			//submit				提交表单
			//target				用于发送和接收响应的窗口名称;等价于HTML的target特性.
			
			//取得form的方法:
			var form = document.getElementById('form1')
			console.log(form)
			//forms	
			var form1 = document.forms[0]
			var form2 = document.forms['formname2']
			console.log(form1)
			console.log(form2)
			
			//发送服务器之前会触发submit事件.阻止这个默认行为就可以取消表单提交.如下:
			// form.onclick = function(e){
			// 	e.preventDefault()
			// }
			
			//提交表单
			// form.submit()
			
			//重置表单
			// form.reset()
			
			//取得表单控件
			console.log(form.elements)
			console.log(form.elements['btn'])
			console.log(form.elements.length)
			
			//共享表单字段属性
			form.elements[0].value = "我是修改的值"
			console.log(form.elements[0].form === form)
			form.elements[0].focus()
			// form.elements[0].disabled = true
			
			form.onsubmit = function(e){
				console.log(e)
				// var btn = form.elements['btn1']
				// btn.disabled = true
			}
			
			//共有的表单字段方法
			//focus和blur	
			//focus用于将浏览器焦点设置到表单字段.如下:
			// window.onload = function(e){
			// 	form.elements[0].focus()
			// }
			//blur 从元素中移走焦点
			// console.log(form.elements[0].blur())
			// //change		对于input和textarea,失去焦点并且value值改变时触发
			// form.elements[0].onchange = function(){
			// 	console.log('改变')
			// }
			form.onfocus = function(e){
				if(e.target.style.backgroundColor != "red"){
					e.target.style.backgroundColor = "yellow"
				}
			}
			
			form.onblur = function(e){
				if(/[^d]/.test(e.target.value)){
					e.target.style.backgroundColor = "red"
				}else{
					e.target.style.backgroundColor = ""
				}
			}
			form.onchange = function(e){
				if(/[^d]/.test(e.target.value)){
					e.target.style.backgroundColor = "red"
				}else{
					e.target.style.backgroundColor = ""
				}
			}

// var select = document.getElementById('select')
			// select.onselect = function(e){
			// 	console.log(e.target)
			// }
			
			// function g(txt){
			// 	return txt.value.substring(txt.selectionStart,txt.selectionEnd)
			// }
			// console.log(g(select))
			// 
			//自动切换焦点
			
			(function(){
				function tabjd(e){
					var target = e.target
					if(target.value.length == target.maxLength){
						var form = target.form
						for(var i = 0,len = form.elements.length;i<len;i++){
							if(form.elements[i] == target){
								if(form.elements[i+1]){
									form.elements[i+1].focus()
								}
								return
							}
						}
					}
				}
				var t1 = document.getElementById('txt1')
				var t2 = document.getElementById('txt2')
				var t3 = document.getElementById('txt3')
				t1.onkeyup = function(e){
					tabjd(e)
				}
				t2.onkeyup = function(e){
					tabjd(e)
				}
				t3.onkeyup = function(e){
					tabjd(e)
				}
			})()
			var btn = document.getElementById('btnnn')
			btn.onclick = function(){
				console.log(document.forms[0].checkValidity())
			}

<form action="" method="post" id="f1" name="f1">
			<select name="s1" id="s1">
				<option value="o1">我是值1</option>
				<option value="o2">我是值2</option>
				<option value="o3">我是值3</option>
				<option value="o4">我是值4</option>
				<option value="o5">我是值5</option>
			</select>
			<input type="submit" value=""/>
		</form>
		<script>
			var s1 = document.forms[0].elements["s1"]
			console.log(s1.options[0].value)
			console.log(s1.options[0].text)
			s1.onchange = function(){
				console.log(s1.value)
				console.log(s1.options[s1.selectedIndex])
				console.log(s1.selectedIndex,s1.options[s1.selectedIndex].text,s1.options[s1.selectedIndex].value)
				var l = g(s1);
				var message = ''
				for(var i = 0,len = l.length;i<len;i++){
					message += 'index为：' + l[i].index + 'text为：' + l[i].text + '值为:' + l[i].value
				}
				alert(message)
			}
			
			//将选择的值添加到数组中
			function g(select){
				var result = new Array()
				var option = null;
				for(var i = 0,len = select.length;i<len;i++){
					option = select.options[i]
					if(option.selected){
						result.push(option)
					}
				}
				return result 
			}
			console.log()
			
			//添加选项
			var newOption = document.createElement('option')
			newOption.appendChild(document.createTextNode("新文档"))
			newOption.setAttribute('value','o0')
			s1.appendChild(newOption)
			
			//第二种方式添加选项
			var d2 = new Option('新文档2','o00')
			s1.appendChild(d2)
			
			//第三种方式添加选项
			var d3 = new Option('新文档3','o01')
			s1.add(d3,null)
			
			//移除选项
			s1.removeChild(s1.options[0])
			
			//第二种
			s1.remove(0)
			
			//第三种
			s1.options[0] = null
			
			//清除所有
			// for(var i = 0,len=s1.options.length;i<len;i++){
			// 	s1.remove(i)
			// }
			
			//移动和重拍位置
			//将第一个选项移除第二个选项中
			// var y1 = document.getElementById('y1')
			// var y2 = document.getElementById('y2')
			// y2.appendChild(y1.options[0])
			
			//移动位置
			var y3 = s1.options[1]
			var y4 = s1.options[3]
			//向前移动一个
			s1.insertBefore(y3,s1.options[y3.index - 1])
			//向后移动2个
			s1.insertBefore(y4,s1.options[y4.index + 2])
		</script>