Javascript学习笔记9 表单

向右看齐 2022-05-28 08:56 246阅读 0赞

# 表单基础 #

在JS中，表单对应的是HTMLForm-Element类型，其继承自HTMLElement，具有以下独有的属性和方法

*  action：接受请求的URL
 *  method：发送HTTP请求的类型
 *  enctype：编码类型
 *  reset()：重置表单
 *  submit()：提交表单

通过`document.forms`可以取得页面中所有表单，在这个表单集合中，可通过索引号访问

var form = document.forms[0];、

## 提交表单 ##

定义以下任意一种提交按钮

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

使用JS提交表单

var form = document.getElementById("myform");
    form.addEventListener("submit",function(event){ 
        event.preventDefault();   //阻止提交表单
        //do something
        form.submit(); //提交表单，此种方法不会触发submit事件
    },false);

## 重置表单 ##

定义以下任意一种重置按钮

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

使用JS重置表单

var form = document.getElementById("myform");
    form.addEventListener("reset",function(event){ 
        event.preventDefault();   //阻止重置表单
        //do something
    },false);
    form.reset();   //此种方法会触发reset事件

## 表单字段 ##

可以通过表单的`elements`属性访问表单字段，可以按照位置和name来访问

var form = document.getElementById("myform");
    
    var field1 = form.elements[0];
    var field2 = form.elements["textbox1"];
    var length = form.elements.length;

*  当有多个表单控件使用同一name时，通过`name`访问表单元素时，会返回一个集合

**表单字段共有的属性和方法**

*  disabled：布尔值，表示当前字段是否禁用
 *  form：指向当前字段的表单指针
 *  name：当前字段的名称
 *  readOnly：布尔值，表示当前字段是否只读
 *  type：当前字段的类型（fieldset元素不具有此属性）
 *  value：当前字段的值，**对文件字段来说，此属性只读，其包含着文件的路径**
 *  focus()：将浏览器的焦点设置到该字段
 *  blur()：移除焦点

除form属性外，可通过JS修改表单字段的属性

var form = document.getElementById("myform");
    var field1 = form.elements[0];
    
    field1.value = "new value";
    
    field.focus();
    
    field.disabled = true;

**表单字段共有的事件**

*  focus：当前字段获得焦点时触发
 *  blur：当前字段失去焦点时触发
 *  change：对于input和textarea元素，**当它们失去焦点且值改变时触发**；而对于select元素，当选项改变时触发

# 文本框脚本 #

HTML有两种方式表现文本框：`<input>`元素的**单行文本框**和`<textarea>`元素的**多行文本框**

*  对于`<input>`元素，使用`size`属性指定文本框显示的字符数，而通过`maxlength`属性指定允许输入的最大字符数
 *  对于`<textarea>`元素，可以使用`rows`属性和`cols`属性指定文本框的行数和列数，其没有最大字符数。

## 选择文本 ##

**选择所有文本**

var textbox = document.forms[0].elements["textbox1"];
    textbox.select();

*  与`select()`方法对应的是select事件，其在选择了文本框的文本后触发

使用`selectionStart`和`selectionEnd`属性（偏移量），取得选择的文本

var selectedText = textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

**选择部分文本**

textbox.setSelectionRange(开头字符索引，结尾字符索引)；

*  要看到选择的文本，必须在调用`setSelectionRange()`之前或之后**立即将焦点设置到文本框**

## 过滤输入 ##

**使用正则表达式来过滤输出**

textbox.addEventListener("keypress",function(event){   //只允许用户输入数值
        if (!/\d/.test(String.fromCharCode(event.charCode)) && ！event.ctrlKey){
            evnet.preventDefault();  //阻止输入
        }
    },false);

*  `pattern.test(text)`函数如果匹配则返回true
 *  `String.fromCharCode()`函数将字符编码转换为字符串
 *  `event.ctrlKey`用于检测用户是否使用复制和粘贴

## 操作剪贴板 ##

包括6个剪切板事件：**beforecopy，copy，beforecut，cut，beforepaste，paste**  
剪切板数据存储在`clipboardData`对象中，在IE中，其实window对象的属性，在其他浏览器，其是event对象的属性  
clipboardData对象有三个方法：`getData()`, `setData()`, `clearData()`。getData接受一个参数，即数据格式，可用“text”。setData()接受两个参数，数据格式和要放到剪切板的文本

var clipboard = (event.clipboardData || window.clipboardData);
    clipboard.getData("text");
    clipboard.setData("text","new value"); //IE
    clipboard.setData("text/plain","new value"); //其他浏览器

## HTML5约束验证API ##

必填字段

其他输入类型

有效性检测

form.checkValidity()  //有效而返回true，否则返回false

*  每个表单字段和表单本身都具有该方法

禁用验证 (novalidate)

# 选择框脚本 #

选择框是通过`<select>`和`<option>`元素创建的

**HTMLSelectElement类型的属性和方法：**

*  add(newOption,relOption) ：插入新的`<option>`元素，插入位置在相关选项之前
 *  multiple：布尔值，表示是否允许多选
 *  options：所有`<option>`元素的集合
 *  remove(index)：移除指定位置的选项
 *  selectedIndex：选中项的索引，若有多个项被选中，只保存第一个选中项的索引

**HTMLOptionElement类型的属性和方法：**

*  index：当前选项的索引
 *  label：当前选项的标签
 *  selected：布尔值，true表示被选中
 *  text：选择项的文本
 *  value：选项的值

var selectbox = document.forms[0].elements["selectbox1"];
    
    var text = selectbox.options[0].text;   //选择框第一个选项的文本
    var text = selectbox.options[0].value;  //选择框第一个选项的值
    
    var selectedOption = selectbox.options[selectbox.selectedIndex];  //取得选中项
    selectbox.options[0].selected = true;   //选中选择框的第一项
    
    var newOption = new Option("option text","option value");   //调用构造函数创建新的选项
    selectbox.add(newOption, undefined);       //添加到选择框的末尾
    
    selectbox.remove(0);  //移除第一个选项

# 富文本编辑 #

**创建富文本区域**  
方法1：在页面中嵌入一个包含空的HTML页面的iframe，通过设置designMode的值为“on”，来使得该页面能够被编辑，编辑对象则是该页面的`<body>`元素代码

方法2：将**contenteditable**属性赋给页面中的任何元素，使其可以被编辑

*  也可以通过JS将该属性设置为true

**操作富文本**  
主要方式为`document.execCommand()`，该方法接受三个参数：**命令名称**，一个表示是否提供用户界面的布尔值，**执行命令的值（或null）**。**其中第二个参数应始终设置为false**

//将选择的文本转换粗体文本
    frames["richEdit"].document.execCommand("bold",false,null);
    
    //将选择的文本转换为斜体文本
    frames["richEdit"].document.execCommand("italic",false,null);
    
    //创建链接
    frames["richEdit"].document.execCommand("createlink",false,"https://www.zjw666.top");
    
    //格式化为1级标题
    frames["richEdit"].document.execCommand("formatblock",false,"<h1>");
    
    //插入图像
    frames["richEdit"].document.execCommand("insertimage",false,"pic/zjw.jpg");

*  对于具有contenteditable属性为true的元素来说，直接替换成document对象即可，例如`document.execCommand("bold",false,null);`
 *  除此之外，还有三个方法，分别是`queryCommandEnabled()`**(检测命令是否适用，适用则返回true)**, `queryCommandState()`**（检测命令的执行状态，执行成功返回true）**, `queryCommandValue()`**（检测已执行命令的传入值）**，他们都接受一个参数，及命令名称

var result = frames["richEdit"].document.queryCommandState("bold");  //检测粗体命令是否执行成功

**富文本选区**  
使用框架的`getSelection()`方法，返回Selection对象

var selection = frames["richEdit"].getSelection();
    
    var text = selection.toString();  //取得选区的文本
    
    var range = selection.getRangeAt(0)  //返回第一个选区对应的范围
    
    var span = frames["richEdit"].document.createElement("span"); 
    span.style.backgroundColor = "red";
    range.surroundContents(span);  //使用节点环绕选区内容，达到突出文本的效果

**表单和富文本**  
富文本不会被表单自动提交，需要我们自己提取内容

form.addEventListener("sumbit",function(event){ 
        var target = evnet.target;
        //将选区内容复制给comments元素的值
        target.elements["comments"].value = frames["richEdit"].document.body.innerHTML; 
        // 对于具有contenteditable属性的元素
        // target.elements["comments"].value = document.getElementById("richEdit").innerHTML;
    });