Form表单基础知识和常用兼容方法笔记（一）

需要用到的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'

请关注下节，，，，，，，，