深入理解表单脚本系列第二篇——表单字段

×

目录

[1]访问 [2]属性 [3]方法[4]事件

前面的话

  表单字段又叫表单元素,表示表单所包含控件,如<input>、<select>等。本文将详细介绍表单字段的内容

访问

  每个表单都有elements属性,该属性是表单中所有元素的集合。这个elements集合是一个有序列表,其中包含着表单中的所有字段,如<input>、<textarea>、<button>和<fieldset>

  每个表单字段在elements集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和name特性来访问它们

<form action="#">
    <input type="text" name="a">
    <textarea name="b"></textarea>
    <button name="c"></button>
    <fieldset name="d"></fieldset>
</form>
<script>
    var elements = document.forms[0].elements;
    //[input, textarea, button, fieldset, a: input, b: textarea, c: button, d: fieldset]
    console.log(elements);
    //<input type="text" name="a">
    console.log(elements.a);
    //<textarea name="b"></textarea>
    console.log(elements[1])
    console.log(elements[3] === elements.d)//true
</script>

属性

  除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性

disabled    布尔值,表示当前字段是否被禁用
form        指向当前字段所属表单的指针;只读
name        当前字段的名称
readOnly    布尔值,表示当前字段是否只读
tabIndex    表示当前字段的切换(tab)序号
type        当前字段的类型,如"checkbox"、"radio"等等
value       当前字段将被提交给服务器的值

  除了form属性之外,可以通过javascript动态修改其他任何属性

<form action="#">
    <input value="123">
</form>
<script>
    var input = document.forms[0].elements[0];
    console.log(input.disabled);//false
    console.log(input.form);//<form action="#"></form>
    console.log(input.name);//‘‘
    console.log(input.readOnly);//false
    console.log(input.tabIndex);//0
    console.log(input.type);//text
    console.log(input.value);//123
</script>
<form action="#">
    <input value="123">
</form>
<button id="btn1">禁用(启用)</button>
<button id="btn2">只读(读写)</button>
<script>
    var input = document.forms[0].elements[0];
    btn1.onclick = function(){
        input.disabled = !input.disabled;
    }
    btn2.onclick = function(){
        input.readOnly = !input.readOnly;
    }
</script>

方法

  每个表单字段都有两个方法:focus()和blur()

focus()

  focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件 

  [注意]非表单元素设置tabIndex=-1,并设置focus()方法后,也可以获得焦点

blur()

  与focus()方法相对的是blur()方法,它的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

<input id="test" type="text" value="123">
<button id="btn1">input元素获得焦点</button>
<button id="btn2">input元素失去焦点</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>

事件

  除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件

focus

  当前字段获得焦点时触发

blur

  当前字段失去焦点时触发

change

  对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发

  当然,也支持focusin和focusout事件,在焦点管理中已经做了详细介绍,就不再重复

<input id="test" type="text" value="123">
<script>
    test.onchange = function(){
        this.style.backgroundColor = ‘pink‘;
    }
</script>

顺序

  当一个input元素的值改变并且失去焦点时,blur和change事件的顺序是怎么样的呢? 

  所有的浏览器的触发顺序都是先change事件,再blur事件

<input id="test" type="text" value="123">
<script>
    test.onblur=test.onchange = function(e){
        e = e || event;
        this.value += e.type + ‘;‘;
    }
</script>
时间: 2024-10-12 22:30:20

深入理解表单脚本系列第二篇——表单字段的相关文章

深入理解表单脚本系列第一篇——表单对象

× 目录 [1]表单属性 [2]表单事件 [3]表单方法 前面的话 javascript最初的一个应用就是分担服务器处理表单的责任,打破处处依赖服务器的局面.尽管目前的web和javascript已经有了长足的发展,但web表单的变化并不明显.由于web表单没有为许多常见任务提供现成的解决方法,很多开发人员不仅会在验证表单时使用javascript,而且还增强了一些标准表单控件的默认行为.本文是表单脚本系列第一篇——表单对象 表单属性 在HTML中,表单是由form元素来表示的,而在javasc

深入理解javascript函数进阶系列第二篇——函数柯里化

前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细介绍函数柯里化(curring) 定义 currying又称部分求值.一个currying的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来.待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值 从

深入理解DOM事件机制系列第二篇——事件处理程序

× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序和IE事件处理程序四类,下面将详细介绍该部分内容 HTML事件处理程序 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.这个特性的值应该是能够执行的JavaScript代码 在事件处理程序函数内部,this

深入理解javascript选择器API系列第二篇——getElementsByClassName

× 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByClassName()呢?id属性.标签名.class属性并没有什么优劣之分啊.终于,HTML5新增了getElementsByClassName()方法,由于在CSS布局中类名的广泛使用,该方法正好切中痛点,使得通过类名选取元素不再麻烦,成为最欢迎的一个方法.接下来,本文将详细介绍该方法 使用 HTM

深入理解javascript作用域系列第二篇——词法作用域和动态作用域

× 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识.本文是深入理解javascript作用域系列第二篇——词法作用域和动态作用域 词法作用域 第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成

EnjoyingSoft之Mule ESB基础系列第二篇:Mule ESB基本概念

目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application整体构造 4. Mule ESB构造元素 - Flow 5. Mule ESB构造元素 - Connector 6. Mule ESB构造元素 - Processor Mule ESB在众多开源的ESB中处于领先者的地位,MuleSoft公司也作为独角兽,2017年在纽交所上市.我们作为MuleSo

ansible系列第二篇(模块使用)

ansible系列第二篇(模块使用) 模块使用 设置ansible提权 在hosts文件加入sudo提权的密码: 18.18.23.102 ansible_become_pass='passwd' 执行: ansible test -S -R root -m shell -a "ls -l /" 查看ansible有那些模块: ansible-doc -l 获取各个模块详细帮助信息 ansible-doc -s ping ping模块: ansible test -m ping 从受控

深入理解表单脚本系列第三篇——选择文本

× 目录 [1]select() [2]select事件 [3]setSelectionRange() 前面的话 表单是最早用来与用户交互的工具,具有丰富的控件和属性.基本上,它们通过各种控件和属性就可以解决大部分问题.但还有一些问题还是需要表单脚本来实现的,比如本文将要说到的选择文本 select() select()方法用于选择文本框(指type为text的input元素和textarea元素)中的所有文本,该方法不接受参数,且无返回值 <input id="text" va

深入理解javascript对象系列第二篇——属性操作

× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对象系列的第二篇——属性操作 属性查询 属性查询一般有两种方法,包括点运算符和方括号运算符 var o = { p: 'Hello World' }; o.p // "Hello World" o['p'] // "Hello World" [注意]变量中可以存在中文,因