JS学习笔记7_表单脚本
1.获取表单及表单元素引用的方式
var mForm = document.forms[formName];获取表单引用
mForm.elements[elemName]获取表单元素,如有同名的,则得到一组元素(例如radio button)
2.表单元素的常用属性、方法和事件
属性:
name:字段名
value:字段值
type:字段类型,例如button, radio等等
readOnly:设置只读
disabled:设置禁用
方法:
focus():获得焦点
blur():取消焦点
事件:
focus:获得焦点时触发
blur:失去焦点时触发
change:文本框input和文本域textarea在失去焦点且value值改变时触发,下拉列表框select选项改变时触发
3.提交表单的方式
按钮提交
代码提交:form.submit();
回车提交:在除textarea外的任意表单域中按Enter
注意:
代码提交不会触发submit事件,因此必须在这之前验证表单数据
代码重置会触发reset事件,但在实际应用中并不常用reset功能,因为如果误操作点了重置的话会很伤
4.几种提交按钮
通用提交按钮:<input type=”submit”>
自定义提交按钮:<button type=”submit”></button>
图像按钮:<input type=”image” src=url>
其它非按钮元素:<a href=url onclick=”forms[‘mForm’].submit();”>提交</a>
注意:高程上说只有当表单里有前三种按钮之一时,按下Enter键才会提交表单,但本机在IE8,FF,Chrome中测试发现都可以提交(就算表单中只有个文本框,回车也能提交)
5.文本框/文本域(input/textarea)选中部分/全部内容
主流方式:
var text = document.forms[0].elements['userName'];
text.select();//全选
text.setSelectionRange(0, 3);//选择前3个字符(3个汉字或者字母)
[IE8-]设置/获取选中文本的方式与主流方式不同,设置选中的方式如下:
var range = text.createTextRange();
range.collapse();//把范围折叠到开始位置
range.moveStart('character', 0);
range.moveEnd('character', 3);
range.select();
P.S.选中在实现自动补全文本框时比较常用,例如浏览器的URL输入框
6.访问剪切板
对于访问剪切板,各浏览器的实现有差异,甚至有些浏览器不支持访问剪切板,所以不要试图修改不合适的剪切板内容以求验证通过,而应该阻止这些事件的默认行为,甚至在必要的时候可以禁用组合键
可以通过取消paste/cut/copy事件的默认行为来禁用剪切板
7.select的常用属性和方法
属性:
- options获取select的所有Option
- selectedIndex获取选中项的索引(没有选中为-1,多选为第一个选中项的索引)
方法:
- add(newOption, relOption);在relOption前插入newOption
- remove(index);移除索引为index的Option
8.option的常用属性和方法
属性:
selected设置选中
index获取该项在options中的索引
方法:
添加Option:
var newOption(text, value);//一般text和value相同,value用于提交数据
selectbox.add(newOption, undefined);//在末尾插入移除Option:
selectbox.remove(index);//移除第index项
while(selectbox.options.length){//移除所有项
selectbox.remove(0);
}
9.实现富文本框的两种方式
插入iframe,设置src为空文档,并设置frames[iframeName].document.designMode = ‘on';即可实现body可编辑
设置任意元素的contentEditable属性,例如p.contentEditable = ‘true';可以实现任意元素可编辑
注意:
上面给出的两种方式都是全浏览器兼容的,不必担心contentEditable是HTML5属性,因为IE在很多年前就实现了它,本机测试[IE6+]都支持
contentEditable注意大写的E,小写无效
富文本框并不是表单元素,所以不会自动提交,需要用隐藏表单字段来携带富文本内容
虽然支持对富文本框内容的格式化(加粗、设置前/背景颜色等等),但各个浏览器的具体实现不同,因而相同的命令可能生成不同的文本内容
JS学习笔记7_表单脚本的更多相关文章
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- 《JavaScript高级程序设计》笔记:表单脚本(十四)
表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...
- struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox
struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- 20151223jquery学习笔记--Ajax表单提交
传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一. 核心方法官方网站: http://malsup.com ...
- [知了堂学习笔记]_Jquery_Validate 表单校验的使用
一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...
随机推荐
- Python实现的复杂的计算器的代码
用Python实现复杂的计算器,可以按照“()”.乘除.加减的优先级进行混合运算.主旨是对正则表达式进行学习. 设计思路: 1.在计算式中搜索最后一个“(”,再搜索和它匹配的“)”,截取两个括号间的表 ...
- 通过代理上网时,qq等应用程序连网出错
虽然现在基本上都用无线,有线宽带等,但是有时候还是避免不了通过代理上网时,于是就发生浏览器可以正常浏览网页,qq等应用程序连接出错等问题,上网搜了好长时间, 都没解决问题,后来慢慢琢磨(其实是乱 ...
- spring boot 无法启动
spring boot 使用内置tomcat 报错 : Unable to start embedded Tomcat servlet container Tomcat connector in f ...
- nginx的hash
hash结构中有若干个桶,桶内是hash(key)值相同的若干数据. 查找数据时,首先对key值进行hash计算,然后hash值对桶的个数进行求余,得到数据所在的桶.然后在桶中使用key逐个查找,直到 ...
- putty中查询乱码问题
我们在putty连接Linux时候,有时候查询会出现乱码问题...如下图 这个是因为putty中设置编码字符集的原因..将此换为utf8格式的即可解决 解决后查询如下:
- Windows AD域管理软件
- delphi 中如何访问另一个类中到私有方法?(转载)
原始连接 http://rvelthuis.blogspot.tw/2018/01/accessing-private-methods-of-another.html Accessing privat ...
- 【转】使用PHP导入和导出CSV文件
项目开发中,很多时候要将外部CSV文件导入到数据库中或者将数据导出为CSV文件,那么具体该如何实现呢?本文将使用PHP并结合mysql,实现了CSV格式数据的导入和导出功能.我们先准备mysql数据表 ...
- 2019.01.01洛谷 P4725/P4726 多项式对数/指数函数(牛顿迭代)
4725传送门 4726传送门 解析 代码: #include<bits/stdc++.h> #define ri register int using namespace std; in ...
- 2018.11.01 NOIP训练 图论(线段树+倍增+dfs序)
传送门 一道挺妙的题. 对于询问点(u,v),如右图所示,我们可以发现存在一个点m在u->v的路径中,m子树的点到u是最近的,m子树外到v是最近的.其中dis(u,m)=(dis(u,v)-1) ...