Deep understanding of Form Script Series second-form fields

xTable of Contents [1] accessing [2] property [3] method [4] before event

form fields are also called form elements, which represent controls that the form contains, such as <input>, <select>, and so on. This article describes the contents of a form field in detail

Access

Each form has a elements property, which is a collection of all the elements in the form. This elements collection is an ordered list that contains all the fields in the form, such as <input>, <textarea>, <button>, and <fieldset>

The order of each form field in the Elements collection is the same as the order in which they appear in the tag, and can be accessed by location and name attributes

<formAction="#">    <inputtype= "text"name= "a">    <textareaname= "B"></textarea>    <Buttonname= "C"></Button>    <fieldsetname= "D"></fieldset></form><Script>    varElements=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>

Property

All form fields have the same set of properties in addition to the <fieldset> element

    a disabled Boolean value that indicates whether the current field is disabled by        a pointer to the form that the current field belongs to; the name of the current field is read-only        readonly a    Boolean value that indicates whether the current field is read-only tabindex    Represents the current field's Toggle (tab) Ordinal        type of the current field, such as "checkbox", "Radio", and so on       value the current field will be submitted to the server

In addition to the Form property, any other property can be dynamically modified via JavaScript

<formAction="#">    <inputvalue= "123"></form><Script>    varinput=document.forms[0].elements[0]; Console.log (input.disabled);//falseConsole.log (input.form);//<form action= "#" ></form>Console.log (input.name);//"'Console.log (input.readonly);//falseConsole.log (input.tabindex);//0Console.log (input.type);//textConsole.log (input.value);//123</Script>

<formAction="#">    <inputvalue= "123"></form><ButtonID= "BTN1">Disabled (enabled)</Button><ButtonID= "BTN2">Read-only (read-write)</Button><Script>    varinput=document.forms[0].elements[0]; Btn1.onclick= function() {input.disabled= !input.disabled; } Btn2.onclick= function() {input.readonly= !input.readonly; }</Script>

Method

There are two methods for each form field: Focus () and Blur ()

Focus ()

The focus () method is used to set the focal point of the browser to a form field, which activates form fields so that they can respond to keyboard events

[note] The focus is also available when the tabindex=-1 is set to a non-form element and the focus () method is set

Blur ()

In contrast to the focus () method, the Blur () method is used to remove the focus from the element. When the blur () method is called, the focus is not shifted to a particular element; it simply removes the focus from the element that invokes the method.

<inputID= "Test"type= "text"value= "123"><ButtonID= "BTN1">INPUT element gets focus</Button><ButtonID= "BTN2">INPUT element loses focus</Button><Script>Btn1.onclick= function() {Test.focus ();} Btn2.onclick= function() {Test.blur ();}</Script>

Event

In addition to supporting mouse, keyboard, change, and HTML events, all form fields support the following 3 events

Focus

Triggered when the current field gets focus

Blur

Triggered when the current field loses focus

Change

For <input> and <textarea> elements, triggered when they lose focus and value changes, and for <select> elements, when their options change

Of course, also support Focusin and Focusout events, in Focus management has done a detailed introduction, will not repeat

<inputID= "Test"type= "text"value= "123"><Script>Test.onchange= function(){         This. Style.backgroundcolor= 'Pink'; }</Script>

Order

What is the order of the blur and change events when the value of an INPUT element changes and loses focus?

All browser triggers are first change events, then blur events

<inputID= "Test"type= "text"value= "123"><Script>Test.onblur=Test.onchange= function(e) {e=e||event;  This. Value+=E.type+ ';'; }</Script>

Deep understanding of Form Script Series second-form fields