需要用到的HTML
<form id="myForm" name="yourForm" action="">
姓名：<input type="text" id="textFiled" name="user" value="text">
<p id="box"></p>
<input type="submit" id="sub" value="提交">
<textarea name="textbox1" id="" cols="30" rows="10">111</textarea>
<textarea name=" textbox1" id="" cols="30" rows="10">111</textarea>
<select name="location" id="">
<option value="上海v">上海t</option>
<option value="南京v">南京t</option>
<option value="苏州v">苏州t</option>
</select>
</form>
1,取出form中的元素
var fm=document.forms[0]或者var fm=document.getElementById(‘myForm‘) 或者var myForm=document.forms[‘yourForm’]; //取得表单
var textbox=fm.elements[‘textbox1‘] //取得name=textbox1 的 textarea
var selectbox=fm.elements[‘location‘];以上都可以用id取得相应的元素
var textFiled=document.getElementById(‘textFiled‘);//input
表单字段elements是取得form所有表单元素的集合：
例如：
<textarea name="content" id="" cols="30" rows="10">111</textarea>
<textarea name=" content " id="" cols="30" rows="10">222</textarea>
var textarea= form.elements[‘content’] 取得name=content的表单元素集合
var field= textarea[0] 取得第一个name为content的textarea;
2, 表单属性，方法
表单提交submit（）；
fm.submit();
重置表单reset();
form.rest();
acceptCharset:服务器能处理的字符集
action:接受请求的url
elements:表单所有控件的集合
length:表单中控件的数量
method:要发送http请求类型
name:表单的名称
reset();重置表单
submit:提交表单
target:用于发送请求和接收响应的窗口名称
3,共有的表单字段属性和方法， 事件
属性：
disabled:字段是否被禁用 <input type="text" id="sub" value="文本被禁用 " disabled=true >
form: 当前表单元素是否指向某个表单
name:当前字段名称
readyOnly:当前是否只读 <input type="text" id="sub" value="文本只读 " readyOnly =true >
type：字段类型
value:提交给服务器的值
方法：
focus（）：得到焦点的方法
blur（）:失去焦点的方法
h5新增方法 autofocus <input type="text" id="sub" value="文本" autofocus > 不用focus 焦点自动移动到相应字段
事件
blur:当前字段失去焦点时触发
change:对于input和textarea 元素，在他们失去焦点且value值改变时候触发，而对于select元素，在其选项改变时触发；经常用于验证用户在字段中输入的数据；
focus：当前字段得到焦点时候触发
4,文本框脚本，选择文本框，取得选择的文本，选择部分文本
选择文本框select()
这个方法用于选择文本框中所有的文本，大多数浏览器（opera）除外都会将焦点设置到文本框中，
与之对应的select事件，选择文本框的文本时会触发该事件，什么时候触发看各个浏览器
取得选择的文本
html5通过扩展方案解决了这个问题。添加属性selectionStart 和 selectionEnd 这两个属性中保存的是基于0 的数值 但是可悲的是ie8 不支持者两个属性
例如：textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)
兼容ie8及以下版本 选择文本
function getSelectText(textbox){
If(typeof textbox.selectionStart==”number”){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)
}else if(document.selection){
return document.selection.createRange().text;
}
调用//调用var textFiled=document.getElementById(‘textFiled‘); ev.addEvent(textFiled,"select",function(){ var result=getSelectText2(this); document.getElementById(‘box‘).innerHTML=result; })
选择部分文本 setSelectionRange()
setSelectionRange()接受两个参数：要选的的第一个字符的索引和要选择的最后一个字符之后的索引 可悲的是ie又不兼容
例子：
textbox.value=’hello word’
//选择所有文本
Textbox.setSelectionRange(0,textbox.value.length);
//选择前三个字符
Textbox.setSelectionTange(0,3); //hel
//选择第四道第六个字符
Textbox.setSelectionTange(4,7); //’o w’
兼容ie8及以下版本 选择部分文本
//选择部分文本兼容办法
function selectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){
var range=textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex)
range.moveEnd("character",stopIndex-startIndex);
range.select();
}
textbox.focus();
}
//调用textbox.value=‘hello word‘;
//选择全部文本selectText(textbox,0,textbox.value.length)//‘hello word‘
//选择前3个字符selectText(textbox,0,3)//‘hel‘
//选择第四到第六个selectText(textbox,4,7)//‘o w‘
请关注下节，，，，，，，，