js高级程序设计笔记9--表单

表单的基本知识

表单对应的是HTMLFormElement类型。有他自己独有的属性和方法。

acceptCharset:服务器能够处理的字符集。
action:请求的URL
elements:表单中所有控件的集合。
length:表单中控件的数量。
method:HTTP请求类型。
name:表单的名称。
reset():将所有表单重置为默认值。
submit():提交表单。
target:用于发送请求和接收响应的窗口的名称。

提交表单

三种提交方式

<input type="submit" value="submit form">
<button type="submit">submit form</button>
<input type="image" src="graphic.gif">

在js中，调用form的submit()方法也可以提交表单。

重置表单

<input type="reset" value="reset form">
<button type="reset">reset form</button>

重置表单会使所有表单字段恢复到页面刚加载完毕时的初始值。
在js中也可以调用form的reset()方法重置表单。

表单字段

1.共有的表单字段属性
除了元素之外。所有表单字段都拥有相同的一组属性。

disabled:当前字段是否被禁用。
form:指向当前字段所属表单的指针，只读。
name：当前字段的名称。
readOnly:表示当前字段是否只读。
tabIndex:表示当前字段的切换（tab)序号。
value:当前字段将被提交给服务器的值。对于文件字段来说，这个属性是只读的。包含着文件在计算机中的路径。

防止表单重复提交：最常见的解决方案就是在第一次单击后禁用提交按钮。只要侦听submit事件，并在该事件发生时禁用提交按钮即可。

EventUtil.addHanler(form,"submit",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var btn = target.elements["submit-btn"];
    btn.disabled = true;
})

注意不能通过onclick事件处理程序来实现这个功能。因为不同浏览器之间存在“时差”，有的浏览器会在触发表单的submit事件之前触发click事件（意味着提交发生之前禁用按钮导致永远都不会提交表单）。有的则相反。
2. 共有的表单字段方法
focus():得到焦点，激活表单字段。
blur():失去焦点。
HTML5为表单字段新增了一个autonfocus属性。自动把焦点移到相应字段。

<input type="text" autofocus>

1. 共有的表单字段事件
   blur:
   change:对于和元素，在他们失去焦点且value值改变时触发。对于元素，在其选项改变时触发。
   focus:

文本框脚本

//能够显示25个字符，但输入不能超过50个字符
<input type="text" size="25" maxlength="50" value="initial value">
//字符行数为25，字符列数为5，初始值必须在<textarea>之间，不能给<textarea>指定最大字符数
<textarea rows="25" cols="5">initial value</textarea>

1. 选择文本：这两种文本框都支持select()方法，用于选择文本框中的所有文本。
   select事件：在选择了文本框的文本时（即使只有一个字母）就会触发select事件。
2. 取得选择的文本：HTML5通过两个属性：selectionStart和selectionEnd。（即文本选取开头和结尾的偏移量).

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}

IE8及之前不支持这两个属性。它有个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息。

if(document.selection){
    return document.selection.createRange().text;
}

1. 选择部分文本
   所有文本框都有一个setSelectionRange()方法，接收两个参数：要选择的第一个字符的索引和最后一个字符的索引。
   IE8及其更早版本使用范围选择部分文本。

function selectText(textbox,startIndex,stopIndex){
    if(textbox.setSelectionRange){
        textbox.setSelectionRange（startIndex,stopIndex);
    }else if(textbox.createTextRange){
        var range = extbox.createTextRange();
        range.collapse(true);
        range.moveStart("character",startIndex);
        range.moveEnd("character",stopIndex-startIndex);
        range.select();
    }
    textbox.focus();
}

过滤输入

• 屏蔽字符
  响应文本框中插入字符操作的是keypress事件。因此可以通过阻止这个事件的默认行为来屏蔽此类字符。但有些浏览器也会对其它键触发此事件。Firefox和Sarari(3.1版本之前)会对上键，下键，退格键和删除键触发keypress事件。在firefox中，所有由非字符键触发的keypress事件对应的字符编码为0，safari对应的字符编码为8.还要确保用户没有按下Ctrl键（复制粘贴需要）例子：只允许输入数字

EventUtil.addHandler(textbox,"keypress",function(event)){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTartget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.text(String.fromCharCode(charCode)) && charCode>9 && !event.ctrlKey){
        EventUtil.preventDefault(event);
    }
}

• 
  
• 操作剪贴板
  剪贴板事件：
  

beforecopy:
copy:在复制时触发
beforecut:
cut:在发生剪切时触发
beforepaste:
paste:在发生粘贴时触发。
这些事件及相关对象会因浏览器而异。
要访问剪贴板的数据可以使用clipboardData对象。在IE中这个对象是window对象的属性。而在firefox,safari,chrome中是event对象的属性，但是只有在处理剪贴板事件期间此对象才有效，这是为了防止度剪贴板的未授权访问。这个对象有三个方法：
getData():从剪贴板中取得数据。接受一个参数：要取得数据的格式。IE有两种数据格式“text”和”URL”.在其它浏览器是一种MIME类型。返回布尔值。
setData():接收两个参数。第一个是数据类型。第二个是放在剪贴板中的文本。返回布尔值。
clearData():清楚数据。

var EventUtil = {
    ....
    getClipboardText:function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    }
    setClipboardText:function(event,value){
        if(event.clipboardData){
            return event.clipboardData.setData("text/plain",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("text",value);
        }
    }
}

选择框脚本

HTMLSelectElement类型提供了下列属性和方法。

add(newOption,relOption):向控件中插入元素，在relOption之前。
multiple:布尔值，表示是否多项选择。
options:控件中所有元素的HTMLCollection。
remove(index):移除给定位置的选项。
selectedIndex:基于0的选中项的索引。
size:选择框中可见的行数。

每个元素都有一个HTMLOptionElement对象表示。此对象有如下属性。

index:当前选项在options集合中的索引。
label:当前选项的标签。
selected:表示当前选项是否被选中。
text:当前选项的文本。
value:选项的值。

添加选项

//使用DOM方式
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("option text"));
newOption.setAttribute("value","option value");
selectbox.appendChild(newOption);
//使用OPtion构造函数
var newOption = new Option("option text","option value");
selectbox.appendChild(newOption);
//selectbox.add(newOption,undefined);