JavaScript高级程序设计 第4版 --表单脚本

news2024/10/7 4:34:28

表单脚本

1、基础

  •  acceptCharset:服务器可以接收的字符集,等价于 HTML 的 accept-charset 属性。
  •  action:请求的 URL,等价于 HTML 的 action 属性。
  •  elements:表单中所有控件的 HTMLCollection。
  •  enctype:请求的编码类型,等价于 HTML 的 enctype 属性。
  •  length:表单中控件的数量。
  •  method:HTTP 请求的方法类型,通常是"get"或"post",等价于 HTML 的 method 属性。
  •  name:表单的名字,等价于 HTML 的 name 属性。  reset():把表单字段重置为各自的默认值。
  •  submit():提交表单。
  •  target:用于发送请求和接收响应的窗口的名字,等价于 HTML 的 target 属性。

获取form元素

let form = document.getElementById("form1"); //id
// 取得页面中的第一个表单
let firstForm = document.forms[0];
// 取得名字为"form2"的表单
let myForm = document.forms["form2"]; 
2、提交表单

表单是通过用户点击提交按钮或图片按钮的方式提交的

如果表单中有上述任何一个按钮,且焦点在表单中某个控件上,则按回车键也可以提交表单。(textarea 除外),这样就提供了验证表单数据的机会

<!-- 通用提交按钮 --> 
<input type="submit" value="提交"> 
<!-- 自定义提交按钮 --> 
<button type="submit">提交</button> 
<!-- 图片按钮 --> 
<input type="image" src="graphic.gif"> 
 <!-- 阻止表单提交 --> 
event.preventDefault(); 
 <!-- 在js中通过调用submit提交表单--> 
let form = document.getElementById("myForm"); 
// 提交表单
form.submit();
3、重置表单

重置按钮可以使用 type 属性为"reset"的或 元素来创建

<!-- 通用重置按钮 --> 
<input type="reset" value="重置"> 
<!-- 自定义重置按钮 --> 
<button type="reset">重置</button> 
4、表单字段

可以像页面中的其他元素一样使用原生DOM方法来访问

let form = document.getElementById("form1"); 
// 取得表单中的第一个字段
let field1 = form.elements[0]; 
// 取得表单中所有名为"textbox1"的字段
let field2 = form.elements["textbox1"]; 
// 取得字段的数量
let fieldCount = form.elements.length; 
表单字段的公共属性
  •  disabled:布尔值,表示表单字段是否禁用。
  •  form:指针,指向表单字段所属的表单。这个属性是只读的。
  •  name:字符串,这个字段的名字。
  •  readOnly:布尔值,表示这个字段是否只读。
  •  tabIndex:数值,表示这个字段在按 Tab 键时的切换顺序。
  •  type:字符串,表示字段类型,如"checkbox"、"radio"等。
  •  value:要提交给服务器的字段值。对文件输入字段来说,这个属性是只读的,仅包含计算机上 某个文件的路径
js可动态修改任何属性
let form = document.getElementById("myForm"); 
let field = form.elements[0]; 
// 修改字段的值
field.value = "修改后的值"; 
// 检查字段所属的表单
console.log(field.form === form); // true 
// 给字段设置焦点
field.focus(); 
// 禁用字段
field.disabled = true; 
// 改变字段的类型(不推荐,但对<input>来说是可能的)
field.type = "checkbox";

// 避免多次提交表单的代码
let form = document.getElementById("myForm"); 
form.addEventListener("submit", (event) => { 
 let target = event.target; 
 // 取得提交按钮
 let btn = target.elements["submit-btn"]; 
 // 禁用提交按钮
 btn.disabled = true; 
}); 
表单字段的公共方法

focus()、 blur()

h5:autofocus()

表单字段的公共事件
  •  blur:在字段失去焦点时触发。
  •  change:在和元素的 value 发生变化且失去焦点时触发,或者在 元素中选中项发生变化时触发。
  •  focus:在字段获得焦点时触发。
5、文本框编程
单行使用<input>元素,多行使用<textarea>元素
<input type="text" size="25" maxlength="50" value="文本">
<textarea rows="25" cols="5">initial value</textarea>
选择文本

1、select():全部选中文本框中的文本

let textbox = document.forms[0].elements["textbox1"]; 
textbox.select();
 // 一获取焦点就自动选中所有文本
textbox.addEventListener("focus", (event) => { 
 event.target.select(); 
});

2、select事件

let textbox = document.forms[0].elements["textbox1"]; 
textbox.addEventListener("select", (event) => { 
console.log(`文本内容: ${textbox.value}`); 
}); 

3、部分选中文本

setSelectionRange(第一个字符索引,最后一个字符索引)

textbox.value = "Hello world!" 
// 选择所有文本
textbox.setSelectionRange(0, textbox.value.length); // "Hello world!" 
// 选择前 3 个字符
textbox.setSelectionRange(0, 3); // "Hel" 
// 选择第 4~6 个字符
textbox.setSelectionRange(4, 7); // "o w" 
6、输入过滤

1、屏蔽字符

//屏蔽所有
textbox.addEventListener("keypress", (event) => { 
 event.preventDefault(); 
}); 
//只允许输入数字
textbox.addEventListener("keypress", (event) => { 
 if (!/\d/.test(String.fromCharCode(event.charCode))){ 
 event.preventDefault(); 
 }

2、处理剪贴板

  •  beforecopy:复制操作发生前触发。
  •  copy:复制操作发生时触发。
  •  beforecut:剪切操作发生前触发。
  •  cut:剪切操作发生时触发。
  •  beforepaste:粘贴操作发生前触发。
  •  paste:粘贴操作发生时触发。

3、自动切换

在当前字段完成时自动切换到下一个字段

// 当用户输入长度与maxlength属性的值一样时,切换到下一个字段输入框
function tabForward(event){ 
 let target = event.target; 
 if (target.value.length == target.maxLength){ 
 let form = target.form; 
 for (let i = 0, len = form.elements.length; i < len; i++) { 
 if (form.elements[i] == target) { 
 if (form.elements[i+1]) { 
 form.elements[i+1].focus(); 
 } 
 return; 
 } 
 } 
 } 
 } 
 let inputIds = ["txtTel1", "txtTel2", "txtTel3"]; 
 for (let id of inputIds) { 
 let textbox = document.getElementById(id); 
 textbox.addEventListener("keyup", tabForward); 
 } 
 let textbox1 = document.getElementById("txtTel1"); 
 let textbox2 = document.getElementById("txtTel2"); 
 let textbox3 = document.getElementById("txtTel3");
7、HTML5约束验证API

1、必填字段(required)

<input type="text" name="username" required> 

2、输入类型(email,url)

<input type="email" name="email"> 
<input type="url" name="homepage"> 

3、数值范围(“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week” 和"time")

<input type="number" min="0" max="100" step="5" name="count">

4、输入模式(pattern:正则表达式)

<input type="text" pattern="\d+" name="count">

5、检测有效性

字段是否有效:checkValidity()

//整个表单是否符合字段约束条件
if(document.forms[0].checkValidity()){ 
 // 表单有效,继续
} else { 
 // 表单无效
} 

字段为什么有效或无效:validity

这个属性是一个对象,包含一系列返回布尔值的属性。

  •  customError:如果设置了 setCustomValidity()就返回 true,否则返回 false。
  •  patternMismatch:如果字段值不匹配指定的 pattern 属性则返回 true。
  •  rangeOverflow:如果字段值大于 max 的值则返回 true。
  •  rangeUnderflow:如果字段值小于 min 的值则返回 true。
  •  stepMisMatch:如果字段值与 min、max 和 step 的值不相符则返回 true。
  •  tooLong:如果字段值的长度超过了 maxlength 属性指定的值则返回 true。某些浏览器,如
  • Firefox 4 会自动限制字符数量,因此这个属性值始终为 false。
  •  typeMismatch:如果字段值不是"email"或"url"要求的格式则返回 true。
  •  valid:如果其他所有属性的值都为 false 则返回 true。与 checkValidity()的条件一致。
  •  valueMissing:如果字段是必填的但没有值则返回 true
if (input.validity && !input.validity.valid){ 
 if (input.validity.valueMissing){ 
 console.log("请输入值) 
 } else if (input.validity.typeMismatch){ 
 console.log("Please enter an email address."); 
 } else { 
 console.log("Value is invalid."); 
 } 
}

6、禁用验证 (novalidate)

//禁止对表单做任何验证
<form method="post" action="/signup" novalidate> 
 <!-- 表单元素 --> 
</form>
8、选择框编程

选择框时使用和元素时创建的

  •  add(newOption, relOption):在 relOption 之前向控件中添加新的。
  •  multiple:布尔值,表示是否允许多选,等价于 HTML 的 multiple 属性。
  •  options:控件中所有元素的 HTMLCollection。
  •  remove(index):移除给定位置的选项。
  •  selectedIndex:选中项基于 0 的索引值,如果没有选中项则为–1。对于允许多选的列表,始 终是第一个选项的索引。
  •  size:选择框中可见的行数,等价于 HTML 的 size 属性。 选择框的 type 属性可能是"select-one"或"select-multiple",具体取决于 multiple 属性 是否存在。当前选中项根据以下规则决定选择框的 value 属性。
  •  如果没有选中项,则选择框的值是空字符串。
  •  如果有一个选中项,且其 value 属性有值,则选择框的值就是选中项 value 属性的值。即使 value 属性的值是空字符串也是如此。
  •  如果有一个选中项,且其 value 属性没有指定值,则选择框的值是该项的文本内容。
  •  如果有多个选中项,则选择框的值根据前两条规则取得第一个选中项的值。
<select name="location" id="selLocation"> 
    // 若选中该项,值为Sunnyvale, CA
 <option value="Sunnyvale, CA">Sunnyvale</option> 
    // 若选中该项,值为""
 <option value="">China</option> 
     // 若选中该项,值为"Australia"
 <option>Australia</option> 
</select>
  •  index:选项在 options 集合中的索引。
  •  label:选项的标签,等价于 HTML 的 label 属性。
  •  selected:布尔值,表示是否选中了当前选项。把这个属性设置为 true 会选中当前选项。
  •  text:选项的文本。
  •  value:选项的值(等价于 HTML 的 value 属性
9、富文本编辑

1、 designMode

<!--为iframe源 1.html>

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Blank Page for Rich Text Editing</title> 
 </head> 
 <body> 
 </body> 
</html>

<!-- 2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="./1.html"  name="richedit" style="height: 100px; width: 100px"></iframe>
</body>
<script>
    window.addEventListener("load", () => {
        frames["richedit"].document.designMode = "on";
    }); 
</script>
</html>

在这里插入图片描述

2、使用 contenteditable

  <div class="editable" id="richedit" contenteditable style="height: 300px; width: 300px;border: 1px solid #000;"></div>

在这里插入图片描述

3、与富文本交互

document.execCommand() 可接收三个参数:要执行的命令、浏览器是否为命令提供用户界面的布尔值(为浏览器兼容,应始为false)、执行命令必需的值

命令说明
backcolor颜色字符串设置文档背景颜色
boldnull切换选中文本的粗体样式
copynull将选中文本复制到剪贴板
createlinkURL字符串将当前选中文本转换为指向给定url的链接
cutnull将选中文本剪切到剪贴板
deletenull删除当前选中的文本
fontname字体名将选中文本改为使用指定字体
fontsize1-7将选中文本改为指定字体大小
forecolor颜色字符串将选中文本改为指定颜色
formatblockHTML 标签,如h1将选中文本包含在指定的 HTML 标签中
ndentnull缩进文本
inserthorizontalrulenull在光标位置插入hr元素
insertimage图片URL在光标位置插入图片
insertorderedlistnull在光标位置插入ol元素
insertparagraphnull在光标位置插入p元素
insertunorderedlistnull在光标位置插入ul元素
italicnull切换选中文本的斜体样式
justifycenternull在光标位置居中文本块
justifyleftnull在光标位置左对齐文本块
outdentnull减少缩进
pastenull在选中文本上粘贴剪贴板内容
removeformatnull移除包含光标所在位置块的 HTML 标签。这是 formatblock 的 反操作
selectallnull选中文档中所有文本
underlinenull切换选中文本的下划线样式
unlinknull移除文本链接。这是 createlink 的反操作

下图为很简单的一个富文本编辑器

<template>
    <div>
        <a-row :gutter="[10,10]">
            <a-col v-for="action in actions"><a-button @click='exec(action.value)'>
                    {{ action.title }}
                </a-button></a-col>
        </a-row>
    </div>
    <div className="content" contenteditable style="height: 400px; width: 400px;border: 1px solid #000;margin-top: 10px;"></div>
</template>
<script lang='ts' setup>
const actions = [
    {
        title: "B",
        value: "bold",
    },
    {
        title: "I",
        value: "italic",
    },
    {
        title: "U",
        value: "underline",
    },
    {
        title: "L",
        value: "JustifyLeft",

    },
    {
        title: "R",
        value: "JustifyRight",
    },
    {
        title: "C",
        value: "JustifyCenter",
    }
]
const exec = (commandName: any, value: any = null) => {
    document.execCommand(commandName, false, value);
};
</script>
 
<style scoped>

</style>

在这里插入图片描述

4、富文本选择(getSelection())

  •  anchorNode:选区开始的节点。
  •  anchorOffset:在 anchorNode 中,从开头到选区开始跳过的字符数。
  •  focusNode:选区结束的节点。
  •  focusOffset:focusNode 中包含在选区内的字符数。
  •  isCollapsed:布尔值,表示选区起点和终点是否在同一个地方。
  •  rangeCount:选区中包含的 DOM 范围数量。 Selection 的属性并没有包含很多有用的信息。好在它的以下方法提供了更多信息,并允许操作 选区。
  •  addRange(range):把给定的 DOM 范围添加到选区。
  •  collapse(node, offset):将选区折叠到给定节点中给定的文本偏移处。
  •  collapseToEnd():将选区折叠到终点。
  •  collapseToStart():将选区折叠到起点。
  •  containsNode(node):确定给定节点是否包含在选区中。
  •  deleteFromDocument():从文档中删除选区文本。与执行 execCommand(“delete”, false, null)命令结果相同。
  •  extend(node, offset):通过将 focusNode 和 focusOffset 移动到指定值来扩展选区。
  •  getRangeAt(index):返回选区中指定索引处的 DOM 范围。
  •  removeAllRanges():从选区中移除所有 DOM 范围。这实际上会移除选区,因为选区中至少 要包含一个范围。
  •  removeRange(range):从选区中移除指定的 DOM 范围。
  •  selectAllChildren(node):清除选区并选择给定节点的所有子节点。
  •  toString():返回选区中的文本内容。
let selection = frames["richedit"].getSelection(); 
// 取得选中的文本
let selectedText = selection.toString(); 
// 取得表示选区的范围
let range = selection.getRangeAt(0); 
// 高亮选中的文本
let span = frames["richedit"].document.createElement("span"); 
span.style.backgroundColor = "yellow"; 
range.surroundContents(span);

5、通过表单提交富文本

//frames
form.addEventListener("submit", (event) => { 
 let target = event.target; 
 target.elements["comments"].value = 
 frames["richedit"].document.body.innerHTML; 
});
// contenteditable
orm.addEventListener("submit", (event) => { 
 let target = event.target; 
 target.elements["comments"].value = 
 document.getElementById("richedit").innerHTML; 
}); 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/63579.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

详解设计模式:状态模式

状态模式&#xff08;State Pattern&#xff09;也被称为状态机模式&#xff08;State Machine Pattern&#xff09;&#xff0c;是在 GoF 23 种设计模式中定义了的行为型模式。 在状态模式 类的行为是基于它的状态改变的。在状态模式中&#xff0c;我们创建表示各种状态的对象…

9.图片分类数据集

1. 图像分类数据集 MNIST数据集 [LeCun et al., 1998] 是图像分类中广泛使用的数据集之一&#xff0c;但作为基准数据集过于简单。 我们将使用类似但更复杂的Fashion-MNIST数据集。 %matplotlib inline import torch import torchvision from torch.utils import data from t…

idea配置tomcat热部署不生效问题

idea中配置了tomcat的“update classes and resources”后&#xff0c;点击run之后&#xff0c;每次修改代码都没有及时生效&#xff0c;也就是没有成功进行热部署。 在idea中实现热部署&#xff0c;要先设置自动编译&#xff0c;再选择正确的运行模式&#xff08;Debug运行&am…

SSM和SpringBoot整合

目录 一、整合Mybatis 配置文件 pom.xml application.yml jdbc.properties generatorConfig.xml 启动类 测试 二、整合Mybatis-plus Mybatis-plus 新建项目 pom.xml application.yml 在项目导入mybatis-plus的代码生成的类 完成基本增删改查方法开发 三、Mybatispl…

常用数据库之sql server的使用和搭建

1.1 介绍 关系型数据库&#xff0c;SQLServer是由微软公司开发的一种关系型据库管理系统&#xff0c;它已广泛用于电子商务、银行、保险、电力等行业。SQLServer提供了对XML和Internet标准的支持&#xff0c;具有强大的、灵活的、基于Web的应用程序管理功能。 1.2 优缺点 优点…

毕业设计-基于机器视觉的安全帽佩戴识别系统

目录 前言 课题背景与意义 课题实现技术思路 目标检测 算法检测 算法实现 最后 前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着准备考研,考公,考教资或者实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年各个学校要求的毕设项目越…

企业子网划分详解

一、IP协议 1、IP协议简介 IP协议是TCP/IP协议族的基石,它为上层提供无状态、无连接、不可靠的服务,也是Socket网络编程的基础之一。 IP协议特点: 无状态:指IP通信双方不同步传输数据的状态信息,因此所有IP数据报的发送,传输,接收都是相互独立的。这种服务最大缺点是…

Web5到底是什么?Web4去哪了?

Web3咱还没搞明白&#xff0c;Web3还没有完全的投入应用 &#xff0c;这Web5怎么就来了&#xff1f; 在今年6月召开的加密盛宴Consensus上&#xff0c;推特创始人比特必信徒杰克多西&#xff0c;首次提出全新Web5的概念&#xff0c;并公开呛声Web3的VC们可以洗洗睡了&#xff…

【Lilishop商城】No2-7.确定软件架构搭建六(本篇包括延时任务,会用到rocketmq、redis)

仅涉及后端&#xff0c;全部目录看顶部专栏&#xff0c;代码、文档、接口路径在&#xff1a; 【Lilishop商城】记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客 全篇只介绍重点架构逻辑&#xff0c;具体编写看源代码就行&#xff0c;读起来也不复杂~ 谨慎&#xf…

使用python进行贝叶斯统计分析

本文讲解了使用PyMC3进行基本的贝叶斯统计分析过程. 最近我们被客户要求撰写关于贝叶斯统计分析的研究报告&#xff0c;包括一些图形和统计输出。 # 导入 import pymc3 as pm # python的概率编程包 import numpy.random as npr # numpy是用来做科学计算的 import matplotlib…

cubeIDE开发,结合图片取模工具,stm32程序在LCD显示图片

一、图片取模工具&#xff08;imag2lcd&#xff09; 我们前面将汉字显示时说过&#xff0c;嵌入式LCD屏显示就是通过LCD屏幕数据接口给每个屏幕像素给出一个颜色值实现实时渲染显示出来。只不过文字显示时&#xff0c;给出的是一个二进制点阵&#xff0c;然后根据二进制中的“1…

Java文件输入输出(简单易懂版)

文章目录写在前面文件输入文件输出写在前面 在Java中不论文件输入还是输出都会用到File类&#xff0c;参考这篇文章Java File类&#xff08;文件操作类&#xff09;详解这里会涉及到绝对路径、相对路径、路径中的斜杠“/”和反斜杠“\”&#xff0c;有些小伙伴可能不熟悉&…

数据结构—B树、B+树

文章目录B树B树的特点为什么要有B树&#xff1a;红黑树和B树比较B树B树的特点B树构建过程查询时数据提供数据磁盘向cpu推送数据B树的优点总结为什么要有B树&#xff1a;B树用途&#xff1a;为什么要有B树&#xff1a;B树用途&#xff1a;———————————————————…

WorkTool企微机器人APP分享自定义小程序

移动端应用怎么分享自定义小程序到企业微信 前言 什么是自定义小程序&#xff0c;就是我们可以通过业务逻辑或代码来动态修改每次发出的小程序所附带的路径(path)和参数(params)&#xff0c;以此来控制每次发出的小程序都是有不同含义的&#xff0c;但企业微信并不让我们这样…

[附源码]Python计算机毕业设计Django体育器材及场地管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

【Spring】事务管理

目录项目目录spring-dao.xml测试项目目录 UserMapper.xml写sql语句UserMapperImpl继承sqlSessionDaoSupport然后在里面做一个addUser和一个delete我们delete语句故意写错 但是我们想把add和delete当成一个事务delete错了&#xff0c;add也不应该成功所以我们需要进行事务管理配…

FLStudio2023水果中文版本使用操作心得与技巧

FL Studio2023是一款强大的音乐创作编辑软件&#xff0c;因软件LOGO为水果标志&#xff0c;故我们国人都习惯称之为水果。它让你的计算机就像是全功能的录音室&#xff0c;漂亮的大混音盘&#xff0c;先进的创作工具&#xff0c;让你的音乐突破想象力的限制。因此它又有"水…

手撕ThreadLocal源码

首先&#xff0c;创建MyThreadLocal类&#xff0c;区分开java.lang.ThreadLocal package com.huhu.threadlocal;import java.util.HashMap; import java.util.Map;public class MyThreadLocal<T> {/*** 所有需要和当前线程绑定的数据要放到这个容器当中*/private Map<…

WIFI的传输距离介绍

WIFI的传输距离介绍 WiFi模块在智能家居&#xff0c;智能驾舱等各行业各领域应用极广&#xff0c; 但有多少人了解他的传输距离是多少呢&#xff1f;是受什么影响呢&#xff1f; 一&#xff1a;WiFi模块的传输距离 WiFi模块的传输距离普遍在100-200米之间&#xff0c;其中也有支…

乐观锁思想在JAVA中的实现——CAS

前言 生活中我们看待一个事物总有不同的态度&#xff0c;比如半瓶水&#xff0c;悲观的人会觉得只有半瓶水了&#xff0c;而乐观的人则会认为还有半瓶水呢。很多技术思想往往源于生活&#xff0c;因此在多个线程并发访问数据的时候&#xff0c;有了悲观锁和乐观锁。 悲观锁认…