js红宝石第十九章-表单脚本

最新推荐文章于 2024-05-20 15:17:08 发布

hlyxsky

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量46

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_60599861/article/details/131710477

版权

JS即做表单验证,又用于增强标准表单控件的默认行为

19.1 表单基础

Web表单在HTML中用<form>表示,在JavaScript中则用HTMLFormElement类型表示

HTMLFormElement的属性和方法:
acceptCharset: 服务器可以接收的字符集

action: 请求的URL

elements: 表单中所有控件的HTMLCollection

enctype: 请求的编码类型

length: 表单中控件的数量

method: HTTP请求方法的类型,GET/POST

name: 表单的名字

reset(): 把表单字段重置为默认值

submit(): 提交表单

target: 发送请求和接收相应的窗口的名字

19.1.1 提交表单

提交按钮的定义:

    <!-- 通用按钮 -->
    <input type="submit" value="Submit Form">

    <!-- 自定义按钮 -->
    <button type="submit">Submit Form</button>

    <!-- 图片按钮 -->
    <input type="image" src="url">

调用preventDefault()可以阻止表单提交

也可以通过submit()来提交,但是不会触发submit事件

      let form = document.getElementById('myForm')

      form.addEventListener('submit',(e)=>{
        e.preventDefault() // 阻止表单提交
      })

      // 提交表单
      form.submit()

19.1.2 重置表单

单击重置按钮可以重置表单

    <!-- 通用重置按钮 -->
    <input type="reset" value="Reset Form">

    <!-- 自定义重置按钮 -->
    <button type="reset">Reset Form</button>

调用preventDefault()可以阻止表单重置

也可以通过reset()来重置,但是不会触发reset事件

19.1.3 表单字段

表单元素可以和其它元素一样用原生DOM方法访问

所有表单元素都是表单elements属性中包含的一个值,可以通过索引位置和name属性访问

  <body>
    <form method="post" id="myForm">
      <ul>
        <li><input type="radio" name="color" value="red" />red</li>
        <li><input type="radio" name="color" value="blue" />blue</li>
        <li><input type="radio" name="color" value="green" />green</li>
      </ul>
    </form>
    <script>
      let form = document.getElementById('myForm')

      let colorFields = form.elements["color"]
      console.log(colorFields);
    </script>
  </body>

1.表单的公共属性

disabled: 表示表单是否禁用

form: 指向表单字段所属的表单,只读属性

name: 字段的名字

readOnly: 只读属性

tabIndex: 这个字段按tab时的切换顺序

type: 字段类型

value: 提交给服务器的字段值

2.表单属性的公共方法

每个表单字段都有两个公共方法:

focus() 获得焦点和 blur()移除焦点

3.表单字段的公共事件

blur: 失去焦点时触发

change: <input>和<textarea>中value变化或者<select>选项变化时触发

focus: 获得焦点时触发

19.2 文本框编程

<input>单行

<textarea>多行

19.2.1 选择文本

两种文本框都支持select()方法,全部选中文本框的文本

下面的代码实现了获得焦点就全选

      let form = document.getElementById('myForm')
      console.log();

      form.addEventListener('focus',(e)=>{
        e.target.select()
      })

1.select事件

当选中文本框的文本时,就会触发select事件

2.取得选中文本

select不能获得选中文本,所以H5添加了拓展:selectionStart和selectionEnd,分别表示文本选取的起点和终点

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

3.部分选中文本

setSelectionRange(start,end) 和substring()一样,获得部分文本

19.2.2 输入过滤

文本框需要保证输入特定类型或格式的数据

所以需要JS实现输入过滤

1.屏蔽字符

keypress事件负责向文本框插入字符,可以通过阻止这个事件去阻止不合规的字符输入

      // 只允许输入数字
      textbox.addEventListener('keypress',(e)=>{
        if(!/\d/.test(String.fromCharCode(e.charCode))){
          e.preventDefault()
        }
      })

2.处理剪切板

新增加的剪切板事件:

beforecopy: 复制发生前触发

copy: 发生时触发

beforecut: 剪切发生前触发

cut: 剪切发生时触发

beforepaste: 粘贴发生前触发

cut: 粘贴发生时触发

要阻止剪贴板操作,需要阻止copy,cut,cut事件

剪贴板数据可以通过event对象上的clipboardData对象获取,为了防止未经授权访问剪贴板,只允许在剪贴板事件期间访问

clipboardData对象的三个方法:getData() setData() clearData()

第一个参数是类型第二个参数是要放上去的文本

getClipboardText() 获取事件对象的位置后,就能使用剪贴板了

      //确定剪贴板上的文本是否有效
      textbox.addEventListener('paste',(e)=>{
        let text = getClipboardText(e)

        if(!/^\d*s/.test(text)){
          e.preventDefault()
        }
      })

19.2.3 自动切换

JS可以实现当前字段完成后自动切换到下一个字段

p593

19.2.4 HTML5约束验证API

required 必填项

更多输入类型:

email url

数值范围:

min max step(步长)

stepUp() stepDown() 从当前值加/减某个值

输入模式 pattern

指定正则表达式

检测有效性

checkValidity() 检测任意给定字段是否有效

禁用验证

noValidate

19.3 选择框编程

选择框使用<select>和<option>元素创建

选择框的额外属性和方法:

add(newOption,relOption): 在relOption前面添加新的<option>

multiple: 表示是否允许多选

options: 所有<option>元素的HTMLCollection

remove(index): 移除给定位置的选项

selectedIndex: 选中项的索引值

size: 选择框中可见的行数

type属性可能是 select-one 或者 select-multiple

每个<option>元素在DOM中都是HTMLCollectionElement对象,添加了以下属性:

index: 选项在options集合中的索引

lable: 选项的标签

selected: 表示是否选中了当前选项

text: 选项的文本

value: 选项的值

19.3.1 选项处理

对于只选择一项的选择框,可以使用selectedIndex获取关于选项的所有信息:

    let selectedIndex = selectedbox.selectedIndex
    let selectedOption = selectedbox.options[selectedIndex]

    let value = selectedOption.value
    let text = selectedOption.text

取得所有选中项:

    function getSelectedOptions(selectedbox){
      let result = new Array()

      for(let option of selectedbox.options){
        if(option.selected)
          result.push(option)
      }

      return result
    }

19.3.2 添加选项

JS代码可以动态创建并且添加选项

    let newOption = new Option("Option text","Option value")
    selectedbox.add(newOption,undefined)

默认添加到末尾

19.3.3 移除选项

使用remove(index)方法

    // 移除所有选项
    function clearSelectBox(selectedbox){
      for(const option of selectedbox.options){
        selectedbox.remove(0)
      }
    }

19.3.4 移动和重排选项

使用DOM方法

appendChild() 和 insertBefore()

19.4 表单序列化

表单在JS中可以使用type,name,value进行序列化

浏览器确定要把什么发送到服务器:

字段名的和值是URL编码

禁用字段不会发送

复选框或单选框只有被选中才发送

reset 或 button 的按钮不会发送

多选字段的每个选中项都有一个值

点击提交按钮提交表单时,会发送该按钮

<select>元素的值是被选中<select>元素的value属性

19.5 富文本编辑器

基本技术就是在空白的HTML中嵌入iframe,通过designMode属性,可以把这个空白文档变成可编辑的

designMode的值有两个:foo(默认值)和on 设置为on时,整个文档都会变成可编辑的

19.5.1 使用contentditable

可以给页面中任何元素添加contentditable属性,然后该元素会立即被用户编辑

19.5.2 与富文本交互

主要使用document.execCommand()

接收三个参数: 要执行的命令,浏览器是否为命令提供用户界面的布尔值和命令必须值

p605: 常用命令

19.5.3 富文件选择

在内嵌窗格中使用getSelection(),可以获得富文本编辑器的选区

p607: Selection对象的属性

19.5.4 通过表单提交富文本

要把富文本编辑器提交给浏览器,需要手动提取HTML自己提交

在提交表单前,从内嵌窗格或contentditable元素提取HTML,并插入隐藏字段中

    form.addEventListener("submit",(e)=>{
      let target = e.target

      target.elements["comments"].value = frames["richedit"].document.body.innerHTML
    })