html5获取当前表单位置,JavaScript 之 DOM [ 表单操作 ]
表单操作
获取表单元素
Document对象提供了单独的获取方式
document.forms
该属性会得到一个类数组集合
/* 该属性会得到一个类数组对象集合 */
var form = document.forms;
console.log( form );// 显示 HTMLCollection(2) - 类数组对象
document.表单名称
通过表单名称会获取到指定名称的表单元素
新版本浏览器可能不支持
var formName = document.biaodan;
console.log( formName );// 显示
...
获取表单组件元素
HTMLFormElement.elements属性
通过HTMLFormElement对象提供的elements属性来获取指定表单中的所有组件
/* 获取表单元素 */
var form = document.forms[0];
/* 通过HTMLFormElement对象提供的elements属性来获取指定表单中的所有组件 */
var zujian = form.elements;
console.log( zujian );// 显示 HTMLFormControlsCollection(2) - 类数组对象
文本内容的选择
select()方法
获取当前输入框中所选择的文本内容
默认为全选
/* 定位指定元素 */
var input = document.getElementById( 'input' );
/* 为指定表单组件绑定获取焦点事件 */
input.addEventListener( 'focus', function () {
/* select()方法 - 选择当前输入框中所选择的文本内容(默认为全选) */
input.select();
} );
select事件
只要选择文本内容就会触发select()方法
selectionStart()方法
选择文本内容开始的位置(索引值)
selectionEnd()方法
选择文本内容结束的位置(索引值)
/* 定位指定元素 */
var input = document.getElementById( 'input' );
/*
select事件
* 只要选择文本内容就会触发select()方法
* selectionStart - 选择文本内容开始的位置(索引值)
* selectionEnd - 选择文本内容结束的位置(索引值)
*/
input.addEventListener( 'select', function () {
console.log( input.selectionStart, input.selectionEnd );// 显示 对应文本内容的索引值
/* 获取输入框中的文本内容 */
var wenben = input.getAttribute( 'value' );
/* 通过截串的方式获取到用户选取的文本内容 */
var neirong = wenben.substring( input.selectionStart,input.selectionEnd );
console.log( neirong );
} );
设置文本内容
setSelectionRange()方法
设置选择的文本内容
如果焦点在文本内容的最后面会全选文本内容
如果焦点在文本内容中的任意位置(不是最后)会选中设置文本内容
/* 定位指定表单元素 */
var form = document.forms[0];
/* 获取指定表单中的组件 */
var zujian = form.elements[0];
/* 为指定表单组件绑定获取焦点事件 */
zujian.addEventListener( 'focus', function(){
/*
setSelectionRange()方法
* 设置选择的文本内容
* 如果焦点在文本内容的最后面会全选文本内容
* 如果焦点在文本内容中的任意位置(不是最后)会选中设置文本内容
*/
zujian.setSelectionRange( 1, 5 );
} );
下拉列表操作
HTMLSelectElement对象
length属性
获取当前元素的个数
options属性
获取当前所有元素(类数组集合)
selectedIndex属性
显示当前被选中的列表项的索引值
怪物猎人
天涯明月刀
使命召唤
/* 定位指定表单组件 */
var game = document.getElementById( 'game' );
console.log( game.length );// 显示 3(列表项个数)
console.log( game.options );// 显示 HTMLOptionsCollection(3)(类数组对象集合)
console.log( game.selectedIndex );// 显示 0(选中项的索引值)
HTMLOptionElement对象
index属性
获取当前列表项的索引值
selected属性
判断当前列表项是否被选中
text属性
获取当前列表项的文本内容
value属性
当前列表项的value属性值
怪物猎人
天涯明月刀
使命召唤
/* 定位指定表单组件 */
var lieren = document.getElementById( 'lr' );
console.log( lieren.index );// 显示 0(当前列表项的索引值)
console.log( lieren.selected );// 显示 true(当前列表项是否被选中)
console.log( lieren.text );// 显示 怪物猎人(当前列表项的文本内容)
console.log( lieren.value );// 显示 lr(当前列表项的value属性值)
提交表单
submit事件
表单在进行提交时会触发submit事件
该事件会在表单被提交之前,实现对表单的验证
var form = document.forms[0];
form.addEventListener('submit',function(event){
// 实现表单验证
var kuang = document.getElementById('kuang');
var kuangValue = kuang.value;
if (kuangValue === '' || kuangValue === undefined || kuangValue === null) {
console.log('xxxxxx');
// 阻止默认行为
event.preventDefault();
}
});
submit()方法
该方法可用于提交表单
可以使用任何一个按钮进行表单提交(不需要提交按钮)
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
var form = document.forms[0];
form.submit();
});
html5获取当前表单位置,JavaScript 之 DOM [ 表单操作 ]相关推荐
- 常用正则表达式,常用表单验证javascript代码
常用正则表达式,常用表单验证javascript代码 function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0 ...
- html css移动form表单位置,表单form的研究
起因 最近经常在群里看到诸如以下这些问题: 怎么按键盘的Enter键提交表单呢? 移动端怎么聚焦时让键盘变成数字键呢? 移动端如何绑定键盘右下角[提交按钮]事件? 移动端键盘右下角[提交]如果换成[搜 ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- ajax 模拟表单提交,Ajax模拟Form表单提交,含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
- web day02 表格 表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
- php显示html表单内容,HTML表单是什么?HTML表单内容的详细介绍(附代码)
HTML 表单是用于搜集不同类型的用户输入的,表单是一个包含表单元素的区域:表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素:表单使用表单标签( )定义. 一.介 ...
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () {var wait = $("<img src=\"\" alt=\"正在上传\"/>");$(&q ...
- 『ExtJS』表单(一)常用表单控件及内置验证
几点说明 关于ExtJS的表单,我打算分为三个部分来写 常用表单控件及内置验证 -- 这里主要是JS代码 表单行为与Asp.NET页面的消息回复 -- 这里既有JS代码,与有C#代码,我主要是使用As ...
- Form表单, 4种常见的表单提交方式
浏览器行为:Form表单提交 1.form表单常用属性 1 2 3 4 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name: ...
- html表单对于网页目地,html - 表单form
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
最新文章
- Matlab实现图像白平衡(灰度世界法、全反射算法)
- 用RAM存储器构造能够依次读取各存储单元内容的电路
- android学习笔记(入门篇)
- ZooKeeper的工作原理
- 回调函数中有回调函数吗_嗨,那里有回调!
- POJ 3250 Bad Hair Day【单调队列】
- 0924html小测答案
- Apache SolrCloud安装
- 距离的度量(Dissimilarity Measure、Distance Metric)
- Eclipes中AndbaseDemo 手动导入 Android studio
- VB2010网络通信服务器
- 抽象类和接口的区别(之二)
- NS-miracle安装
- 探索大数据背景下的基因研究
- 微信自动邀请加群!!!
- Android 百度地图 SDK v3.0.0 (四) 引入离线地图功能
- 联想微型计算机内存条安装,笔记本怎么加内存条,详细教您联想笔记本怎么加内存条...
- 硬盘分区MBR和GPT选哪个好?原来分个区还有这么多讲究!
- 互联网人租房有多难?听完这6位的自白,瞬间破防了 ....
- comsol-超导线1
热门文章
- Springaop与动态代理
- 响应式html5灯具灯饰英文外贸类织梦模板(自适应)
- 20060313: 又下雪
- iTween基础之Punch(摇晃)
- 电商ERP具备的四大特点
- ensp中AR设备启动失败,40错误解决办法
- repo安装方法(转)
- Ribbon的AvailabilityFilteringRule的坑(Spring Cloud Finchley.SR2)
- 【调剂】大连理工大学电子信息与电气工程学部2022年硕士研究生招生考试调剂缺额与报名通知...
- window10下载安装pytorch1.6.0