Javaｓｃｒｉｐｔ表单处理实现代码
形式简介在HTML中，形式是以元表示，在Javaｓｃｒｉｐｔ中，形成对应的htmlformelement型。
/ / htmlformelement继承HtmlElement；因此它与HTML属性的默认元素，具有自己的属性和方法；
htmlformelement属性和方法
属性或方法描述
字符集，acceptcharset服务器可以处理；
动作接受请求的URL；
元素表单中所有控件的集合；
该类型的enctype请求编码；
长度形式的控件数；
要发送的HTTP请求的类型的方法是usually'get'or'post；
名称形式的名称；
目标用于发送请求和响应窗口的名称。
重置（）重置所有表单；
提交（）提交表单；
1。获取表单对象；
document.getelementbyid（'myform '）； / / ID元素；
document.getelementsbytagname（‘形'{ 0 }）； / /获取表单元素使用该集合的第一个元素；
文档：表单{ 0 }；数字表单访问元素使用下标；
文件形式{ 'myform}； / /表格名称为元素；
2。提交表单
（1）。通过事件对象，可以防止提交的默认行为，提交事件的默认行为是将数据传送到指定的页面。
复制代码代码如下所示：
AddEvent（FM，他们服从真主，功能（EVT）{）
PreDef（EVT）；
}）；
（2）。我们可以使用提交（）方法定义触发提交事件；也就是说，不一定要单击提交按钮提交。
复制代码代码如下所示：
如果（e.ctrlkey能= = 13）{
Fm.submit（CTRL）； / /保持判断和回车键触发提交；
}
以名称=形式的形式来避免使用提交或id等名称，并且它将提交（）冲突的方法导致无法提交；
（3）。重复提交
当数据提交给服务器时，会有很长一段时间没有响应，导致用户不停止单击提交，
这么多人提交相同的请求，或者导致错误，或者写同一个信息数据库；
复制代码代码如下所示：
AddEvent（FM，他们服从真主，功能（EVT）{ / /服务器延迟仿真；
PreDef（EVT）；
setTimeout（）函数（{ / / 3秒处理后提交到服务器；
Fm.submit（）；
}，3000）；
}）；
解决重复提交方案
第一步：提交后，立即单击禁用按钮；
document.getelementbyid（'sub）。禁用= true； / /关闭按钮；
第二：提交后，取消以下表单提交；
var标志= false；设置一个监视变量；
如果（标志返回= TRUE）；如果有返回的退出事件；
标志= true； /或确定第一次，变量的值变化监控；
三.复位形式
用户单击重置按钮，表单将被初始化；
虽然这个按钮也被保留，但是Web已经很少使用了；因为用户填写信息时，不小心点击重置将全部清空，用户体验非常糟糕；
有两种方法调用重置：事件：第一种是直接类型=重置可以使用；第二种（FM重置）是一种方法调用；
不需要js代码来实现；
AddEvent（文档，点击功能（））{
（FM重置）；使用JS方法重新设置；
}）；
4。表单字段
/ /表格处理，推荐使用HTMLDOM，它有自己的元素属性，该属性是表单中的所有元素的集合；
元素{ 0 }；获取第一个表单字段元素；
FM。元素{用户}； / /名称值是表单字段元素的用户；
fm.elements.length； / /得到所有表单字段的数量；
（1）。公共表单字段属性
除了元素外，所有表单字段都具有相同的属性集；
属性描述
禁用的布尔值，该值指示当前字段是否已禁用；
表单指向当前字段所属窗体的指针，只读；
命名当前字段的名称；
只读的布尔值，指示当前字段是只读的；
tabindex表示当前场的开关；
类型中当前字段的类型；
当前字段在值中的值；
元素{ 0 }值；获取并设置值；
元素{ 0 }。禁用= TRUE；禁用当前字段；
（2）。共形场法
方法的描述
焦点（）将焦点置于表单字段中；
Blur（）将焦点从元素移动；
（3）。普通表单字段事件
事件名称描述
当字段失去焦点时会触发模糊；
当值改变和焦点丢失时，触发元素和元素的变化；对于元素，当选项被更改时触发；
聚焦当前字段得到焦点时焦点；
使用焦点事件修改文本框的背景色；
使用更改事件在用户输入非数字字符中再次修改背景色；
无功bextbox =文件形式{ 0 }，{ 0 }；
EventUtil.addHandler（文本框、集中、功能（EVT）{）
极值理论（EVT）= eventutil.getevent；
VaR目标= eventutil.gettarget（EVT）；
如果（target.style.backgroundcolor！='）{
target.style.backgroundcolor =''； / /选定文本框的背景是黄色的；
}
}）；
EventUtil.addHandler（文本框，'blur功能（EVT）{ / /焦点；
极值理论（EVT）= eventutil.getevent；
VaR目标= eventutil.gettarget（EVT）；
如果（测试（目标值））{输入/非数字字符；
target.style.backgroundcolor ='； / /文本框为红色背景；
其他{ }
target.style.backgroundcolor =；
}
}）；
EventUtil.addHandler（文本框，显示功能（EVT）{ / /值变化和焦点；
极值理论（EVT）= eventutil.getevent；
VaR目标= eventutil.gettarget（EVT）；
如果（测试（目标值））{
target.style.backgroundcolor ='； / /文本框变成红色；
其他{ }
target.style.backgroundcolor =；
}
}）；
两个文本框脚本
在html中，有两种表示文本框的方法：
是一个单行文本框；
是一个多行文本框；
1。获得值值
虽然这个值在字面意义上是，但不是，但是可以通过值来获得它们的值；
VaR TextField = FM。元素{ 0 }；
无功areafield = FM。元素{ 1 }；
警报（TextField。价值+，+ areafield。值）； / /获得价值；
使用表单值 / / PS：最值得推荐的是，它是HTMLDOM物业，getAttribute方法不推荐使用标准（DOM）；
原因是：值属性的变化，不一定反映在DOM中；
原来价值 / /默认值：值；将不会改变，由于价值观的变化；
警报（TextField。默认值）； / /先设定值；
2。选择文本
使用select（）方法可以选择文本框的内容，并将焦点设置为文本框；
（文本框。选择）； / /选择文本框中的所有文本的重点是；
选定文本
当文本框的内容，我们有时不得不直接选择文本的一部分，没有标准的这种行为；
/ / Firefox solution is: (setSelectionRange) method; it takes two parameters: index and length;
TextField.setSelectionRange（0,1）； / /第一个字符；
TextField.setSelectionRange（0，TextField。价值。长度）； / /选择所有；
以下 / / IE8不支持这样的操作范围可以用来代替IE；
var = textfield.createtextrange（范围）； / /创建文本对象；
Range.collapse（真）； / /指针的起点；
Range.moveStart（字符，0）； / /指针、字符表示，移动；
Range.moveEnd（字符，1）； / /移动终端；
（范围选定）；选定的焦点；
选择一些文本/兼容函数
功能selecttext（文本、启动、停止）{
如果（文本。setselectionrange）{
Text.setSelectionRange（启动、停止）；
text.focus（）；
} else if（文本。createtextrange）{
变量范围= text.createtextrange（）；
Range.collapse（真的）；
Range.moveStart（字符，开始）；
Range.moveEnd（字符，停止启动）；
Range.select（）；
}
}
（选择）和相应的方法，是一个选择事件，可以触发所选文本框文本；
AddEvent（TextField，'select功能（））{
警报（此值）；需要通过该事件传递；
}）；
获取选择文本
/ /火狐提供了两个属性：selectionstart和selectionEnd；
AddEvent（TextField，'select功能（））{
警报（this.value.substring（this.selectionstart，这个selectionend））；
}）；
/ / IE8，提供另一种解决办法：选择属于文档对象；
对象在文本信息范围内的整个文档中保存用户选择；
兼容函数
功能getselectext（文本）{
如果（typeof text.selectioinstart = =数）{ / / IE；
返回text.value.substring（text.selectionstart，文本。selectionend）；
否则如果（文档选择）{ IE / ie；
返回document.selection.createrange（文本）； / /被选中文本的IE；
}
}
有一个问题：ie：当选择触发事件触发后，立即选择一个字符，另一个是触发浏览器释放鼠标按钮来选择所需的字符后；
所以使用警报（ / /）会导致跨浏览器的兼容；
因此，我们可以选择将文本赋值给另一个对象；
AddEvent（TextField，'select功能（））{
/ /警报（getselectext（这））； / /用户行为导致不一致的结果；
document.getelementbyid（'box）.innerHTML = getselectext（本）；
}）
三.滤波器的输入
为了使文本框输入指定的字符，我们必须验证输入字符到文本框中；
AddEvent（areafield，'keypress功能（EVT）{）
var = EVT window.event | |；
var字符码= getcharcode（EVT）； / /得到的字符编码；
如果（！ / /。试验（String.formCharCode（字符码）字符码> 9）！E.ctrlKey）{
PreDef（EVT）； / /停止默认；
}
}）；
/ / PS：上半年的情况只能输入数字，传统的键，如光标键或退格键/删除键不能用；
诸如Firefox之类的部分浏览器需要释放这些键，而不是字符编码触发器为0；
/ /在safari3浏览器将受阻，及其对应的字符的所有8个编码，所以最终的判断加上字符码> 9；
以确保用户不按Ctrl / /；
停止剪切/复制并粘贴文本框；
事件名称描述
复制操作发生时，将触发复制。
切割操作发生时触发。
粘贴操作发生时会触发粘贴。
beforecopy复制操作发生时触发。
beforecut切割操作发生时触发。
Beforepaste是粘贴操作发生时触发。
如果我们想禁用剪切/复制粘贴，可以阻止默认行为；
AddEvent（areafield，切功能（EVT）{）
PreDef（EVT）；
}）；
AddEvent（areafield，'copy功能（EVT）{）
PreDef（EVT）；
}）；
AddEvent（areafield，'paste功能（EVT）{）
PreDef（EVT）；
}）；
最后影响因素输入，输入方法为；
中文输入法，其原理是将第一个文本存储在面板上的输入法中，按输入英文书写的文本，将中文文本写入到新闻盒中；
解决方案：通过CSS禁用V输入法；
style= 'ime-mode：残疾人； / / CSS直接写；
areafield。风格。imemode =禁止'； / /套的JS；
输入法不能停止，因此，文本使用常规结果输入；
AddEvent（areafield，'keyup功能（EVT）{）
this.value = this.value.replace（ / { ^ D} / g）； / /数字是非空的更换；
}）；
4。自动切换焦点
为了增加表单字段的使用方便性，许多字段在某些条件下（如长度）会自动切换到下一个字段填写；
只能写1；
功能tabforward（EVT）{
var = EVT window.event | |；
VaR目标= gettarget（EVT）；
用指定长度确定当前长度；
如果（target.value.length = =目标。最大长度）{
所有字段的遍历；
对于（var i = 0；i < fm.elements.length；i++）{
找到当前字段；
如果（元素{ = } =目标）{
将焦点移到下一个字段中；
如果（元素{ i + 1 }）{
元素{ i + 1 }。焦点（）；
}
返回中途；
返回；
}
}
}
}
三个选择框脚本
选择框由元素和元素创建。
htmlselectelement对象
属性/方法描述
添加（新的，相对）插入新的元素并指定位置；
多重布尔值，是否允许多个选择；
选项的设置元素的htmlcollection；
删除（索引）删除给定位置的选项；
SelectedIndex根据0个选择项的索引，如果没有选择项，值为1；
在大小选择框中可见的行数；
/ / DOM中，每个元素都有一个htmloptionelement对象访问数据；
htmloptionelement对象
属性描述
在选项集合中索引当前选项的索引；
标记当前选项标签；
选定的布尔值，该值指示当前选项是否已选定；
文本选项的文本；
价值选择的价值；
VaR市= FM。元素{ '城市' }； / / htmlselectelement；
警报（市。选项）； / / htmloptionscollection；
警报（城市。选择{ 0 }）； / / htmloptionelement；
警报（城市类型）；
：选择类型属性框可能是：选择一个，可能是：选择多个；
这取决于HTML代码没有多个属性；
警报（城市选项{ 0 }文本）；上海文本，获取文本值；
警报（城市选项{ 0 }值）；上海值，获取值值；
PS： /选择操作，最好使用HTMLDOM浏览器，想更好的兼容性；
如果使用标准DOM，因为不同的浏览器导致不同的结果；
当没有值：当选择值时，IE返回一个空字符串，其他浏览器将返回文本；
2。选择选项
只有一个选择框，这是最简单的使用SelectedIndex属性。
复制代码代码如下所示：
AddEvent（市，‘变'，功能（））{
警报（这个。SelectedIndex）； / /获取当前选择指数，从0开始；
警报（这个选项{ }。SelectedIndex。文本）； / /得到文本选项的当前值；
警报（这个选项{ }。SelectedIndex。值）； / /得到的价值选项的当前值；
}）；
city.selectedindex = 1； / /设置SelectedIndex可以定位索引；
选项的属性（布尔值）也可以设置为某个索引并设置为true。
城市。选项{ 0 }。选择= TRUE；设置第一个索引；
在选定和SelectedIndex差异：
1.selected是返回布尔值；因此它一般用于判断；
对2.selectedindex回报的价值，这是一般用于设置和获取。
复制代码代码如下所示：
AddEvent（市，‘变'，功能（））{
如果（此选项为{ 2 } }选定的= TRUE），则确定第三个选项被选中；
警报（谈看法！）；
}
}）；
三.添加选项
如果需要动态添加选项，我们提供两种解决方案：DOM和选项构造函数；
（1）DOM
期权= document.createelement（'option'）；
option.appendchild（document.createtextnode（北京文本）；
option.setattribute（价值'，'北京'的价值；
city.appendchild（选项）；
（2）选项构造函数
期权=新的选项（北京文本、北京价值）；
city.appendchild（选项）； / / IE浏览器的bug；
（3）。使用Add（）方法添加选项：
期权=新的选项（北京文本、北京价值）；
city.add（选项0）； / / 0，添加到第一；
在DOM中，在参数中添加（2）是必需的，如果不是正确的索引，那么第二个参数可以设置为null，这是最后一个选项中的默认值；
但是，伊江中的第二个参数是可选的，因此将null设置为不存在的位置，从而导致丢失；
为了兼容，可以通过未定义的可以兼容；
city.add（选项，null）； / / IE显示不出来；
city.add（选项，定义）； / /兼容；
4。删除选项
有三种方法可以删除一个选项：删除/删除空的DOM（删除）方法；
city.removechild（城市。选择{ 0 }）； / / DOM去除；
（0）city.remove（删除）； / /删除，推荐；
城市。选项{ 0 } = NULL；
当第一个ps：删除，以下项，所以保持，删除第一个项目，你可以删除所有；
5。移动选项
如果有两个选择框，首先选择第一个选项框移动到第二个框，第一个项目的第一个选择框被移除；
VaR市= FM。元素{ '城市' }； / /第一选择框；
VaR信息= FM。元素{ 'info}； / /第二选择框；
info.appendchild（城市。选择{ 0 }）； / /移动、删除第一个选择框；
6。排列选项
选择框提供一个索引属性，它可以获得当前选项的索引值。从SelectedIndex不同的是，所选框对象的调用和选择对象的调用是不同的。
复制代码代码如下所示：
VaR选项=城市。选择{ 1 }；
city.insertbefore（选项，城市。选择{ 6.指数}）； / /转移；
7。单按钮
单选按钮获取选中属性的值；
对于（var i = 0；i < fm.sex.length；i++）{ / /圆单选按钮；
如果（性别{ . } .检查= TRUE）{每一个遍历，并在检查状态中找到一个；
警报（FM {值}）；获取值；
}
}
/ / PS：除了检查属性，单选按钮和一个defaultchecked按钮，
它原来是对象，而不是因为检查的变化；
如果（FM。性{我}。defaultchecked = = true）{
警报（性别{值}）；
}
8。复选按钮
检查按钮以获取选中属性的值，
爱=；
对于（var i = 0；i < fm.love.length；i++）{
如果（爱{我}，检查= TRUE）{
爱=爱，爱，价值；
}
}
警惕（爱）；