18javaScript与表单

1表单（Form）对象
表单对象代表一个 HTML 表单。HTML 中一有 <form> 标签，一个表单对象就被建立了。
表单被用来提示用户输入，输入的数据一般被发送到服务器上做处理。


Form 对象的集合
集合 描述 
elements[] 包含表单中所有元素的数组。 


Form 对象的属性
属性 描述 
acceptCharset 服务器可接受的字符集。 
action 设置或返回将被提交的输入数据的URL。 
enctype 设置或返回表单用来编码内容的 MIME 类型。 
id 设置或返回表单的 id。 
length 返回表单中的元素数量。 
method 设置或返回数据提交给服务器的方式("get"或 "post")。 
name 设置或返回表单的名称。 
target 设置或获取目标内容要显示于哪个窗口或框架 


Form 对象的方法
方法 描述 
reset() 重置所有表单内元素为默认值。 
submit() 提交表单。 


Form 对象的事件
事件句柄 描述 
onreset 当重置事件发生就执行一些代码。 
onsubmit 当提交事件发生就执行一些代码。 


Form表单中只要由一个Submit按钮，那么按回车键默认会触发Form的onSubmit事件。


2按钮（Button） 对象
Button 对象代表 HTML 文档中的一个按钮,该元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。


在 HTML 文档中 <input type="button"> 标签每出现一次，一个 Button 对象 就会被创建。
你可以通过使用 getElementById() 或是表单元素数组的数字或是名称来访问按钮对象。


Button 对象的属性
accessKey 设置或返回访问按钮的快捷键。 
disabled 设置或返回按钮是否可用。 
form 为包含按钮的表单返回一份参考。 
id 设置或返回按钮的 id。 
name 设置或返回按钮的名称。 
tabIndex 设置或返回按钮的 tab 键控制顺序。 
type 返回表单中按钮类型。 
value 设置或返回按钮文字是否显示 


Button 对象的方法


blur() 把焦点从元素上移开。 
click() 在某个按钮上模拟一次鼠标单击。 
focus() 为某个按钮赋予焦点。 


3Checkbox 对象
Checkbox 对象可代表一个 HTML 表单中的 checkbox(复选框)。每当有 <input type="checkbox"> 标签出现在 HTML 表单，一个 Checkbox 对象就建立起来 了。
你可以通过元素数组索引或是使用 getElementById() 来访问 Checkbox 对象。


Checkbox 对象的属性
属性 描述 
accessKey 设置或返回能够访问这复选框的快捷键。 
alt 设置或返回当浏览器不支持 checkbox 时供显示的替代文本。 
checked 设置或返回 checkbox 是否被选中了。 
defaultChecked 返回 checked 属性的默认值。 
disabled 设置或返回复选框是否应该禁用。 
form 返回对包含 checkbox 的表单的引用。 
id 设置或返回 checkbox 的 id。 
name 设置或返回 checkbox 的名称。 
tabIndex 设置或返回 checkbox 的 tab 键控制顺序。 
type 返回 checkbox 的表单元素类型。 
value 设置或返回 checkbox 属性的值。 


<input type="radio" value="no" checked="false"/>这样写是不能让其变为不选中，要么不写checked属性，要么
使用js代码让其不选中。


Checkbox 对象的方法
方法 描述 
blur() 从 checkbox 上移开焦点。 
click() 在 checkbox 中模仿鼠标点击。 
focus() 为 checkbox 加上聚焦。 


checkbox 对象事件
事件 描述 
onBlur 当 checkbox 失去聚焦的时候执行一些代码 
onClick 当 checkbox 被点的时候执行一些代码 
onFocus 当 checkbox 得到聚焦的时候执行一些代码 
onMouseDown 当鼠标按钮按住的时候执行一些代码 
onMouseUp 当鼠标按钮释放的时候执行一些代码 


4FileUpload 对象
在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见，file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略，并且对于此类元素来说，value 属性是只读的，这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名，file-upload 元素触发 onchange 事件。
你可以通过元素数组索引或是用 getElementById() 来访问 FileUpload 对象。


FileUpload 对象属性
accept 设置或返回内容类型列表，服务器可更准确的处理表单。 
accessKey 设置或返回访问 FileUpload 对象的快捷键。 
alt 设置或返回当浏览器不支持 <input type="file"> 时供显示的替代文字。 
defaultValue 设置或返回 FileUpload 对象的初始值。 
disabled 设置或返回是否禁用 FileUpload 对象。 
form 返回对包含 FileUpload 对象的表单的引用。 
id 设置或返回 FileUpload 对象的 id。 
name 设置或返回 FileUpload 对象的名称。 
tabIndex 设置或返回FileUpload对象的tab顺序。 
type 返回表单元素类型，FileUpload对象就返回"file"。 
value 返回 FileUpload 对象在用户输入后的文件名称。 


FileUpload 对象的方法
方法 描述 
blur() 取消对FileUpload对象的聚焦 
click() 模仿鼠标点击FileUpload对象 
focus() 让FileUpload对象获得聚焦 
select() 选择FileUpload对象 


FileUpload 对象的事件
事件 描述 
onBlur 当FileUpload对象失去聚焦的时候执行代码 
onClick 当FileUpload对象被鼠标点击的时候执行代码 
onFocus 当FileUpload对象获得聚焦的时候执行代码 
onSelectStart 当FileUpload对象被选中的时候执行代码 


5Hidden 对象
Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。
这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话，就是 用这种类型的元素。
当 HTML 表单中出现 <input type="hidden"> 标签就意味着 Hidden 对象建立起来了。
你根据表单使用元素数组索引(数字或是名称)或者使用 getElementById() 来访问 Hidden 对象。


Hidden 对象的属性
属性 描述 
form 返回一个对包含隐藏域的表单的引用。 
id 设置或返回隐藏域的 id。 
name 设置或返回隐藏域的名称。 
type 返回隐藏输入域的表单类型。 
value 设置或返回隐藏域的 value 属性值。 


6Password 对象
Password 对象代表 HTML 表单中的密码域。
HTML 的 <input type="password"> 标签在表单上每出现一次，一个 Password 对象就会被创建。
该文本输入字段供用户输入某些敏感的数据，比如密码等。当用户输入的时候，他的输入是被掩盖的（例如使用星号*），以防止旁边的人从他背后看到输入的内容。不过需要 注意的是，当表单提交时，输入是用明文发送的。
与类型为 "text" 的元素类似，当用户改变显示值时，它会触发 onchange 事件句柄。
你可以根据表单的元素组索引数或名称来访问 Password 对象，也可以使用 getElementById() 来访问。


Password 对象的属性
属性 描述 
accessKey 设置或返回访问密码域的键盘快捷键。 
defaultValue 设置或返回密码域的默认值。 
disabled 设置或返回是否应禁用密码域。 
form 返回一个对包含此密码域的表单的引用。 
id 设置或返回密码域的 id。 
maxLength 设置或返回密码域中可输入的最大限度字符数。 
name 设置或返回密码域的名称。 
readOnly 设置或返回密码域里的内容为只读。 
size 设置或返回密码域的长度。 
tabIndex 设置或返回密码域的 tab 键控制顺序。 
type 返回密码域的表单元素类型。password 对象就显示为"password"
value 设置或返回密码域的 value 属性值。 


Password 对象的方法
方法 描述 
blur() 取消对密码域的聚焦。 
focus() 为密码域赋予焦点。 
select() 选取密码域中的文本。 


Password 对象的事件
事件 描述 
onBlur 当密码域失去聚焦的时候执行代码 
onClick 当用户点击密码域的时候执行代码 
onFocus 当密码域得到聚焦的时候执行一些代码 
onKeyDown 当在密码域中按住某键的时候执行代码 
onKeyPress 当在密码域中按下并释放某键的时候执行一些代码 
onKeyUp 当在密码域中释放某键的时候执行一些代码 
onSelectStart 当密码域中的文字选中时执行一些代码 


7Radio 对象
Radio 对象代表 HTML 表单中的单选按钮。
在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件。
你可以从表单元数组的数字或是名称来访问 Radio 对象，或是使用 getELmentById() 来访问它。


Radio 对象的属性
属性 描述 
accessKey 设置或返回访问单选按钮的快捷键。 
checked 设置或返回单选按钮当前的状态（当被选中则为true，false则没有选中）。 
defaultChecked 设置或返回被选中属性的默认值（被默认的选中则为真，不然则为假）。 
disabled 设置或返回是否禁用单选按钮。 
form 返回一个对包含此单选按钮的表单的引用。 
id 设置或返回单选按钮的 id。 
name 设置或返回单选按钮的名称。 
tabIndex 设置或返回单选按钮的 tab 键控制顺序。 
type 返回表单元素类型，是 radio 按钮的话就会返回为 "radio"。 
value 设置或返回单选按钮的 value 属性值。 


Radio 对象的方法
方法 描述 
blur() 从单选按钮移开焦点。 
click() 模拟鼠标点击 radio 按钮。 
focus() 为单选按钮赋予焦点。 


Radio 对象的事件
事件 描述 
onBlur 当 radio 按钮失去聚焦的时候执行代码 
onClick 当用户点击 radio 按钮的时候执行一些代码 
onFocus 当 radio 按钮得到聚焦的时候执行一些代码 
onSelectStart 当 radio 按钮被选中的时候执行一些代码 


8Reset 对象
Reset 对象代表 HTML 表单中的一个重置按钮，每当 HTML 表单中出现 <input type="reset"> 标签就意味着 Reset 被建立起来了。
当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。


重置按钮在重置表单之前触发 onclick 事件，并且这个事件可以通过返回 fasle 来取消。
你可以从表单元数组的数字或是名称来访问 Reset 对象，或是使用 getELmentById() 来访问它。


Reset 对象的属性
属性 描述 
accesskey 设置或返回访问重置按钮的快捷键。 
disabled 设置或返回重置按钮是否应被禁用。 
form 返回一个对包含此重置按钮的表单对象的引用。 
id 设置或返回重置按钮的 id。 
name 设置或返回重置按钮的名称。 
tabIndex 设置或返回重置按钮的 tab 键控制顺序。 
type 返回表单元素类型，是Reset按钮的话就会返回为"reset"。 
value 设置或返回重置按钮上显示的文本。 




Reset 对象的方法
方法 描述 
blur() 从重置按钮上移开焦点。 
click() 在重置按钮上模拟一次鼠标点击。 
focus() 为重置按钮赋予焦点。 
select() 选中radio按钮 


Reset 对象的事件
事件 描述 
onBlur 当Reset按钮失去聚焦的时候执行一些代码 
onClick 当Reset按钮被点击的时候执行一些代码 
onFocus 当Reset按钮得到聚焦的时候执行一些代码 
onSelectStart 当Reset按钮被选中的时候执行一些代码 


9Submit 对象
Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。
在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。
在表单提交之前，触发 onclick 事件，并且一个事件可以通过返回 fasle 来取消表单提交。


你可以从表单数组的数字或是名称来访问 Submit 对象，或是使用 getElementById 来访问它。


Submit 对象的属性
属性 描述 
accessKey 设置或返回访问提交按钮的快捷键。 
disabled 设置或返回提交按钮是否应被禁用。 
form 返回一个对包含提交按钮的表单的引用。 
id 设置或返回提交按钮的 id。 
name 设置或返回提交按钮的名称。 
tabIndex 设置或返回提交按钮的 tab 键控制顺序。 
type 返回表单元素类型，是submit按钮的话就会返回为"submit" 。 
value 设置或返回在提交按钮上显示的文本。 




Submit 对象的方法
方法 描述 
blur() 从提交按钮上移开焦点。 
click() 在提交按钮上模拟一次鼠标点击。 
focus() 为提交按钮赋予焦点。 
select() 选中submit按钮 


Submit 对象的事件
事件 描述 
onBlur 当submit按钮失去聚焦的时候执行一些代码 
onClick 当用户点击了submit按钮的时候执行一些代码 
onFocus 当submit按钮的到聚焦的时候执行一些代码 
onSelectStart 当submit按钮被选中的时候执行一些代码 


10Text 对象
Text 对象代表 HTML 表单中的文本输入域。
在 HTML 表单中 <input type="text"> 每出现一次，Text 对象就会被创建。
该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件。
您可以使用 HTML <textarea> 标记来创建多行文本输入。参阅 Textarea 对象。
对于密码文本输入，把 <input type="text"> 中的 type 设置为 "password"。参阅 Input Password。
你可以从表单数组的数字或是名称来访问 Text 对象，或是使用 getELmentById() 来访问它


Text 对象的属性
属性 描述 
accessKey 设置或返回访问文本域的快捷键。 
defaultValue 设置或返回文本域的默认值。 
disabled 设置或返回文本域是否应被禁用。 
form 返回一个对包含文本域的表单对象的引用。 
id 设置或返回文本域的 id。 
maxLength 设置或返回文本域中的最大限度字符数。 
name 设置或返回文本域的名称。 
readOnly 设置或返回文本域是否应是只读的。 
size 设置或返回文本域的尺寸。 
tabIndex 设置或返回文本域的 tab 键控制顺序。 
type 返回表单元素类型，是 text field的话就会返回为" text field" 。 
value 设置或返回文本域的 value 属性值。 


Text 对象方法
方法 描述 
blur() 从文本域上移开焦点。 
focus() 在文本域上设置焦点。 
click() 模仿鼠标点击 text field 
select() 选取文本域中的内容。
 
Text事件 描述 
onBlur 当文本域失去聚焦的时候执行一些代码。 
onChange 当文本域失去聚焦并且它的值发生变动的时候执行一些代码。 
onClick 当用户在文本域中用鼠标左键点击时执行一些代码。 
onFocus 当文本域获得聚焦的时候执行一些代码。 
onKeyDown 在文本域中有键按住的时候执行一些代码。 
onKeyPress 当文本域中有键按下并释放后执行一些代码。 
onKeyUp 当文本域中按键释放则执行一些代码。 
onSelect 当文本域中当前选中的内容发生变化时执行一些代码。 
onSelectStart 当文本域中一些文字被选中则执行一些代码。 


11Textarea 对象
Textarea 对象代表 HTML 表单中的一个文本区 (text-area)。在表单中 <textarea> 标签每出现一次，一个 Textarea 对象就会被创建。


您可以通过索引相应表单的元素数组来访问某个 Textarea 对象，或者使用 getElementById()。


Textarea 对象的属性
属性 描述 
accessKey 设置或返回访问 textarea 的键盘快捷键。 
cols 设置或返回 textarea 的宽度（用每行可容纳的文字数来做依据）。 
defaultValue 设置或返回文本框中的初始内容。 
disabled 设置或返回 textarea 是否应当被禁用。 
form 返回对包含该 textarea 的表单对象的引用。 
id 设置或返回某个 textarea 的 id 
name 设置或返回 textarea 的名称。 
readOnly 设置或返回 textarea 是否应当是只读的。 
rows 设置或返回 textarea 的高度。 
tabIndex 设置或返回 textarea 的 tab 键控制顺序。 
type 返回表单元素类型。textarea对象返回为"textarea"。 
value 设置或返回在 textarea 中的文本。
textarea的wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
* 默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
* Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
* Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
* Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。


Textarea 对象的方法
方法 描述 
blur() 从 textarea 移开焦点。 
click() 模仿鼠标在 textarea 里的点击 
focus() 在 textarea 上设置焦点。 
select() 选择 textarea 中的文本。 


Textarea 对象的事件
事件 描述 
onBlur 当 textarea 失去焦点的时候执行代码 
onChange 当 textarea 失去焦点的时候里面的内容又发生变化则执行一些代码 
onClick 当鼠标左键在 textarea 里点击后执行某些代码 
onFocus 当 textarea 得到焦点的时候执行代码 
onKeyDown 当在 textarea 里按住键的时候执行某些代码 
onKeyPress 当 textarea 里按过键就执行某些代码 
onKeyUp 当在 textarea 里释放按键的时候执行代码 
onSelect 当 textarea 里的某些文字被选中的时候执行某些代码 


12Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。
你可以从表单数组的数字或是名称来访问 Select 对象，或是使用 getELmentById() 来访问它


Select 对象的集合
集合 描述 
options[] 返回在下拉列表中所有可选项的数组。 


Select 对象的属性
属性 描述 
disabled 设置或返回是否应禁用下拉列表。 
form 返回对包含下拉列表的表单的引用。 
id 设置或返回下拉列表的 id。 
length 返回下拉列表中的选项数目。 
multiple 设置或返回是否选择多个项目。 
name 设置或返回下拉列表的名称。 
selectedIndex 设置或获取选中选项位于 select 对象中的位置。 
size 设置或获取列表中的行数。 
tabIndex 设置或返回下拉列表的 tab 键控制顺序。 
type 返回下拉列表的表单类型。 
value 返回当前选中项的value。
options:按出现的顺序反映选择列表中每个选项的数组。
selectobj.options[selectobj.selectedIndex].text，返回当前选中项的text。
当设置select元素的value属性为某个option的值时，那个options就会被选中。


设置select元素的value属性为指定的值会让对应的option选中，这个在IE7和火狐中都没有问题，只有IE6中会报错，解决的办法是通过setTimeout提供一个延迟来执行这句就可以了。如：
setTimeout(function(){document.getElementsByTagName("select")[0].value=setAreaValue[2];},1);


Select 对象的方法
方法 描述 
add() 向下拉列表添加一个选项。 
blur() 从下拉列表中移除焦点。 
focus() 在下拉列表上设置焦点。 
remove() 从下拉列表中删除一个选项。 


Select 对象的事件
事件 描述 
onBlur 当下拉列表失去焦点的时候执行一些代码 
onChange 当下拉列表失去焦点并且它的值发生变化的时候执行一些代码 
onClick 当用户点击了下拉列表执行一些代码 
onFocus 当下拉列表得到焦点执行一些代码 


13Option 对象
Option 对象代表 HTML 表单中下拉列表中的一个选项。
在 HTML 表单中 <option> 标签每出现一次，一个 Option 对象就会被创建。


你可以从表单数组的数字或是名称来访问 Option 对象，或是使用 getELmentById() 来访问它。


Option 对象的属性 属性 描述 
defaultSelected 返回 selected 属性的默认值。 
disabled 设置或返回选项是否应被禁用。 
form 返回对包含该元素的 <form> 元素的引用。 
id 设置或返回选项的 id。 
index 返回下拉列表中某个选项的索引位置。 
label 设置或返回选项的标记(仅用于选项组option-groups)。 
selected 设置或返回Option的当前状态（是否为选中）。 
text 设置或返回某个选项的纯文本值。 
value 设置或返回当被选中的Option提交到服务器时它所包含的值。 


Option 对象的方法
方法 描述 
click() 模仿鼠标点击Option 




**********************
JS对select动态添加options操作[IE&FireFox兼容]:


<select id="ddlResourceType" onchange="getvalue(this)">
</select>


    动态删除select中的所有options：
       document.getElementById("ddlResourceType").options.length=0;


     动态删除select中的某一项option：
       document.getElementById("ddlResourceType").options.remove(indx);  


     动态添加select中的项option:
       document.getElementById("ddlResourceType").options.add(new Option(text,value));


     上面在IE和FireFox都能测试成功，希望以后你可以用上。
其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。


取值方面
    function getvalue(obj)
    {
        var m=obj.options[obj.selectedIndex].value
        alert(m);//获取value
        var n=obj.options[obj.selectedIndex].text
        alert(n);//获取文本
    }


 检测是否有选中
if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}


 删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;


增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );


修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );


得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;


得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;


*************************************




所有html元素的基本标准属性
className 设置或返回元素的 class 属性。 
dir 设置或返回文本的方向。 
lang 设置或返回元素的语言代码。 
title 设置或返回元素的标题。 




********************
DOM元素的setAttribute可以给元素增加额外的属性，如下：
.setAttribute("fileItemId", currentId);
currentId变量的值就是属性fileItemId的值，通过DOM元素的attribute方法得到该属性的值：
.attributes["fileItemId"].value


*******************
form下回车自动提交的问题：
当form在这几种情况下时具有敲击回车后自动提交的功能：
1. 如果表单里有一个type=”submit”的按钮，回车键生效。
2. 如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3. 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4. 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5. type="image"的input，效果等同于type="submit"，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。


这种提交可能并不是我们想要的，为了取消这种自动提交的功能可以这样处理，就是再写一个无意义的文本框，隐藏起来。
如：
<label class="queryLabel">菜单名称/编码</label>：<input type="text" name="keyWord" id="keyWord" class="queryText"/>
<a href="javascript:void(0)" data-options="iconCls:'icon-search'" class="easyui-linkbutton" onclick="normalQuery();">查询</a>
<input style="display:none"/>
</form>






*****************
解决IE8 select的option过长的问题，显示不全的方法：
首先设置select的宽度为固定的100px，然后在select中又添加了两个事件：onmouseover="fixWidth()" onblur="setWidth()"
对应的方法是：
function fixWidth()
{
    var len = document.getElementById('berth').options.length;
    if( len != 0 ){
        document.getElementById('berth').style.width = "auto";    
    }
}


function setWidth()
{
    document.getElementById('berth').style.width = "100px" ;
}


当鼠标放在select上时就会将select的width设置为auto，这样就可以看到超过长度的部分；而当select失去焦点时，再将width设置为100px，这样就解决了以上问题。