JavaScript表单脚本

贾明恣
293 阅读6分钟

补充：

  • HTML5在表单方面新增的许多属性和事件
  • 低版本IE的奇怪的事件机制、奇怪的表单控件事件机制
  • fieldset标签通常是用在表单中为相关元素分组

JavaScript较早的用途之一：服务器端表单处理的责任，即表单验证

HTMLFormElement类

web表单在HTML以form元素存在，JavaScript中HTMLFormElement类型（继承自HTMLElement)

<form action="/mail.php">处理表单的程序、脚本的位置
    php、asp、aspx、jsp、python、ruby等语言都可以
</form>
  • acceptCharset:服务器可以接收的字符集
  • action：请求的URL
  • elements:表单中所有控件的HTMLCollection
  • enctype:请求的编码类型
  • length：表单中控件的数量
  • method：HTTP请求的方法
  • name:表单的名称
  • reset（）：把表单字段重置为各自的默认值
  • submit（）：提交表单
  • target：用于发送请求和接收响应的窗口的名字

HTML中form元素都有对应元素属性

JS获取对< form >元素的引用的方法

document.forms集合获取页面上所有表单的集合，然后还可以用数字索引或者name（同名则返回集合）来访问特定表单
document.form["formname"];
document.form["formname"].elements["控件name“]；//表单内部的控件也能通过这样的方式访问

控件的公共属性

表单内部的控件的公共属性和方法，JavaScript可以动态修改其来增强标准表单控件的默认行为。 属性：

  • disabled：布尔值，是否禁用.(提交之后禁用提交按钮防止多次提交），禁用字段不会提交
  • form：指针，只读，指向表单
  • name
  • readOnly:该字段是都只读
  • type:
  • value:要交给服务器的字段值
  • tabIndex：按Tab键时的切换顺序

方法：

  • focus()把浏览器焦点设置到表单字段，变成活动字段并可以响应键盘事件

字段被CSS属性display或者visibility隐藏时容易出错，所以HTML5为表单字段增加了autofocus属性，支持的浏览器会自动为带有该属性的元素设置焦点。

<input type="text" autofocus>
  • blur()移除焦点

事件机制

form事件：reset与submit

在向服务器发送请求前触发submit事件，这样就提供了一个表单验证的机会，在submit事件上注册事件处理程序。

表单设计中通常不提倡重置表单，通常是让用户点击返回前一步

 <input tpe="submit" value="提交表单"/>
 <input tpe="reset" value="重置表单"/>
 form.addEventListener('submit', (event) => {
     验证表单内容，阻止非法提交
     event.preventDefault();
     form.submit();
 })

控件事件

  • blur
  • focus
  • change:在input、textarea元素的value发生变化且失去焦点时、select元素中选中项变化时触发

HTML5约束验证API

  • 必填字段,添加属性required
<input type="text" name="username" required>
 let isRequired=document.forms[0].elements["username"].required;//检测是否必须
  • 更多输入类型,默认验证 range、search、tel、time、url、week
 <input type="email" name="email">
 <input type="url" name="homepage">
  • 数值范围
  • 输入模式 搭配 检测有效性
pattern属性添加匹配的正则表达式
checkValidity()和validity属性
  • 禁用验证
 <form novalidate>

HTML5 重写一部分属性

语义化

formaction：重写表单action属性
formenctype：重写表单enctype属性
formmethod：重写表单method属性
formnovalidate：重写表单novalidate属性
formtarget：重写表单target属性

文本框编程

  • 单行使用input 默认type="text"
  • size文本框宽度的字符数
<input  type="text"   size="25" maxlength="50" value="dddd">
  • 多行使用textarea
<textarea rows="3" cols="20"> </textarea>

选择文本

  • 两种文本框都支持select（）方法全选自己的文本
  • 当用户选中文本、调用select方法的时候，会触发select事件
text.select();
text.setSelectionRange(startIndex, len);
selected = text.value.substring(text.selectionStart, text.selectionEnd);

输入过滤

文本框默认没有过滤功能，要通过JavaScript来实现过滤

屏蔽字符

  • keypress事件：向文本框插入字符
text.addEventListener('keypress', (event) => {
     event.preventDefault();// 变成只读文本框
     //输入过滤
     const input = event.charCode;
 })
  • 屏蔽字符
//keypress一般只有在键入字符键的时候才会触发
 textbox.addEventListener("keypress",(event)=>{
	if(!/\d/.test(String.fromCharCode(event.charCode))){
		event.preventDefault();//非数字输入
	}
	//正则表达式/\d/匹配所有的数字字符 /\d/.test
});

上述代码忽略了快捷键的使用，复制黏贴，增加条件

if(!/\d/.test(String.fromCharCode(event.charCode))&&!event.ctrlKey){
}

处理剪贴板

  • 大多数浏览器支持剪贴板相关事件及通过JavaScript访问剪贴板数据的浏览器。
剪贴板事件
- beforecopy：
- copy:
- beforecut:
- cut:
- beforepaste:
- paste:
  • 剪贴板数据可以通过window（IE）、event上的clipboardData（其他大多浏览器）
clipboardData.getData();
clipboardData.setData();
clipboardData.clearData();

自动切换焦点

JavaScript可以通过很多方式来增强表单字段的易用性 最常见的是在当前字段完成时自动切换到下一个字段。对于要收集已知长度的字段。 可以在每个文本框输入到最大自动把焦点切换到下一个文本框。


textboxes.addEventListener("keyup",(event)=>{
    // 判断切换
    event.target.value
    form.elements[i+1].focus();
}

选择框编程

使用select、option元素创建选择框

<select id="mySelect">
	<option value="a">Apple</option>
	<option value="o">Orange</option>
	<option value="p">Pineapple</option>
	<option>Banana</option>
</select>

select属性:

multiple 布尔
type 值'select-one'、'select-multiple'
selectedIndex number 允许多选时候，取值第一个选项
options HTMLCollection
add(newOpt, relOpt); // 在relOpt之前向控件新增newOpt
remove(index);
select.appendChild(new Option("text","value"));
select.removeChild(0);//索引值

option属性:

index:选项在options中的索引
label：
selected:
text:
value:选项的值，无则空字符串

选项处理 单项选择的时候select有selectedIndex 多项选择，遍历selected属性

富文本编辑

一种可内嵌于浏览器，所见即所得的文本编辑器

  • 创建方法1： 添加iframe、并设置iframe.designMode 属性
off(默认）
on 可以编辑，iframe.onload事件内部修改
  • 创建方法2： 给元素添加一个contenteditable属性
true
false
inherit

交互

JavaScript通过execCommand()传入一些浏览器支持的既定命令，与其交互 通过元素框innerHTML属性来获取富文本实现表单提交富文本。

文件选择器

Web表单不仅能收集数据，还能用于传送来自用户硬盘的外部文档

<input type=file>

控件跟操作系统有关

表单序列化

表单可以使用表单字段的type、name、value属性进行序列化 serialize();//返回查询字符串格式，返回其他格式可以适当修改

  • 禁用字段不会发送
  • 复选框只有在被选中才发送
  • type === reset、button的按钮不会发送

表单编码

规定在发送到服务器之前应该如何对表单数据进行编码

enctype formenctype属性 HTML5

默认表单数据会编码为 "application/x-www-form-urlencoded"。即在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

实际编程实践

单选

     <input type='radio' name= '控制单选的因素' value='1'>
     <input type='radio' name= '控制单选的因素' value='e'> 
     <input type='radio' name= '控制单选的因素' value='1e'>

标签+input

<label for='绑定id'>标签文本</label><input type='text' id='绑定id' name='key' value='val'>

button问题

button作为表单元素，浏览器的处理方式存在歧义-不同浏览器会向后端提交不同值。 IE⑦将提交元素的文本，其他浏览器会提交value属性值

所以推荐使用input元素来创建表单中的button

avatar
文章
阅读
粉丝