Previously mentioned, JS was created to reduce the pressure on the server, and at that time the pressure is mainly reflected in the form of verification. At the same time, JS adds some behavior to the Web form.
- Form Basics Go
- text Box script Go
- Select box Script Go
- Form serialization Go
- Rich Text editor Go
JS Form Basics
- JS to get form elements (<form>) method:
- By ID (all elements Common) getElementById ("");
- by document.form:document.forms[0] or document.forms["FormName", where FormName refers to the value of the Name property of the form element.
- Note that the Name property and ID of the form are not necessarily the same, which is often used to bundle form fields
- JS's Htmlformelement object corresponds to the <form> element in HTML, and while inheriting the properties and methods of HtmlElement, you can call the HTML corresponding attributes (such as acceptcharaset, action, Enctype, method, name, action, target, etc.), along with some other methods and properties (such as length, elements, reset (), submit (), etc.)
- Submit a form:
- The type of the commit,<input> or <button> in the HTML is a submit value, or the type of <input> is an image (that is, the images button)
- The submit () method can be called in JS, but this method does not fire the submit event.
- In the case of triggering the submit event, you can do a series of actions (such as blocking the default behavior), and most importantly, you can disallow the button or unbind the commit event after the submit event has been triggered, given the case of a duplicate commit.
- It is important to note that the submit event and the Click event are sometimes poor and cannot determine the order in which the two events are submitted and clicked, so it is best to submit the event with submit.
- Resetting the form
- HTML, set the type of <input> or <button> to reset
- The Reset () method is called in JS.
- Both of these methods can trigger the reset event.
- Note: Resetting means that all of the form information that is filled in is restored to its original value, generally more like the "Cancel" behavior than the lifting position, which is to go back to the previous page instead of resetting all values.
- form fields (elements of a particular form type in a form)
- Access: In addition to the DOM method access, it can also be accessed through the elements element of <form> (combined with the index or the element's Name property value).
- With the Name property value, if multiple form control name values are the same, NodeList is returned, and if indexed, only one is returned.
- Common form Field properties: Properties that are common to elements of all form types. Disabled/form/name/readonly/tabindex/type/value. In addition to the Form property, other properties can be dynamically modified. Note that if disabled=true, this form item is disabled.
- Common form Field methods: Focus ()/blur (). The Autofocus property in HTML5.
- Common form field events: Blur, focus, change. For change, the number of times triggered in different form controls is different, in input or textarea, when the focus is lost and value changes, and in select, it is triggered whenever the option changes.
- In general, some of the form's properties and methods, or the way events are manipulated, are quite realistic logic. Can be slowly understood in the application.
text Box script
- <input type= "text" > or <textarea> can be specified as a text box.
- There is a difference: the former is basically when you enter a text box for a row, you can specify properties such as size, value, and maxlength. The latter behaves as a multiline text box, you can specify properties such as rows and cols, and the initial values are placed between <textarea> and </textarea>, and you cannot specify the maximum number of characters.
- Same: The input content is stored in the Value property. It is recommended that you use the Value property to set or get the text of the text box instead of using a DOM method (such as setattribute), and that the modifications made by the latter do not necessarily reflect in the DOM.
- Select text
- Select (): The focus is typically set in the text box without parameters. In the actual operation, it is common to have the text box focus when all the text is selected .
- Select event. The moment the Select event is triggered varies by browser. The Select event is also triggered when the Select () method is called.
- To get the selected text:
- HTML5 in SelectionStart and selectionend, can be used in conjunction with substring ().
- IE8 and Previous version: Document.selection.createRange (). Text
- Select some text:
- HTML5 in Setselectionrange (). Pass in two indexes that represent the start and end positions (similar to substring (), and the next index is the end position).
- IE8 and previous versions, which need to be used in conjunction with the range: first, use collapse () to start the range folding knife text box, and then pass the number of characters you want to select to MoveEnd (), and then select the text with the range's Select (). As follows:
Textbox.value = "Hello World";
var range = Textbox.createtextrange ();
Range.collapse (TRUE);
Range.movestart ("character", 0);
Range.moveend ("character", textbox.value.length);//"Helloworld"
Range.Select ();
- To see the selected text, you must set the focus to the text box immediately after you select it. In fact, it also conforms to the logic of reality.
- Cross-browser programming can be achieved with these differences.
- Filter input (enter specific data or data in a specific format)
- Masked characters, which are used in conjunction with regular expressions, and due to the character input phase and KeyPress event bindings, should be taken care not to block keys that should not be masked. Here is an example of the input values in the book. See pdfp442-p443.
- Action Clipboard: There are some clipboard events. There are some differences in different browsers, and not all browsers support it. The text that is normally used to paste into the text box meets certain requirements, and the pasted character is detected (paste).
- Auto-Switch Focus: General scenario: Automatically switches focus to the next field when the user fills out the current field. The book cited an example. See PDF P446.
- HTML5 constraint Validation api:html5 adds some simple validation of the form to some simple validation that can be done by the browser. However, the current increase in these operations does not have the perfect cross-browser features, need attention.
Select Box Script
- <select> elements and <option> elements in HTML
- Htmlselectelement has some unique properties and methods. These are all well understood. Note, however, that the Value property is handled by the Value property, which is generally determined by the currently selected item (if not, or null), and if this attribute does not exist, the text value of the item will be considered if it is not present.
- Htmloptionelement also has some unique properties and methods that are equally well understood.
- Note that when it comes to forms, it is generally not necessary to access the information with regular DOM functionality because it will vary by browser and is more cumbersome than proprietary methods.
- Select options:
- First method: Call the SelectedIndex property to determine the index of the selected value
- The second method: Consider the selected value of the element to see if it is true or false. This method is often used to confirm that a user has selected an item.
- Add Options:
- Dom method: Create a <option> element, confirm its literal value, Value property and values, and finally appendchild () add
- With the option constructor, two parameters are passed in: text and value, and the second parameter is optional. Although an object instance is created, the DOM returns an option element and can still be processed with appendchild ().
- With the Add () method of the selection box, accept two parameters, new options to add, and items that will be located after the new option. Note that IE does not require the second parameter, but the DOM is required, so if you want to implement a cross-browser operation to insert a new item into the list of options, you can set the second parameter to undefined.
- Removal options:
- Dom method: RemoveChild ()
- The Remove () method of the Select box
- Null method: Set the appropriate option to NULL
- Move and rearrange: here is the most convenient way to use the DOM .
- Mobile AppendChild ()
- Reflow: InsertBefore ()
Serialization of Forms
- Mainly used to submit useful information in the form, commonly used in Ajax. There are rules that write a serialization function based on these rules serialize (form) such as PDF P455 page, the more troublesome is to deal with option, should be either a multi-select or may be a radio.
Rich text Editing (WYSIWYG, what you see is what you receive)
- Although there is no specification, but already is the fact standard (ie lead)
- One method: implemented by an IFRAME element that contains an empty HTML document. The DesignMode property of the IFRAME is set to "on" and is set to an editable region.
- Note that the DesignMode property can be set only after loading is complete, so you need to mate with the OnLoad event handler.
- Another method: the Contenteditable property. can be applied to any element so that the element can be edited immediately.
- Frames, blank pages, and JS are not required
- "True"/"false"/"Inherit"
- Operation Rich Text: Document.execcommand (), three parameters: the command name to execute, FALSE, the value required to execute the command. There are many specific commands that can be obtained by looking up a table.
- Some of the commands have browser differences. You cannot expect rich text editors to produce unified HTML
- Applies to both of the above methods. As long as you modify the Reference object.
- queryCommandEnabled (): Whether the command can be applied. (and whether the command has been applied significantly)
- Querycommandstate (): Whether the command has been applied.
- Querycommandvalue (): The value to be applied to the command. The third parameter of Document.execcommand ().
- Rich Text selection.
- Use the GetSelection () method of the framework to determine the text that is actually selected.
- Returns a Selection object with methods that typically use the DOM scope to manage the selection for finer control.
- Forms and Rich Text
- Rich Text uses an IFRAME instead of a form, so when you commit, you need to take the value of the rich text area out and assign a form field to the commit operation. This is better understood.
JavaScript Advanced Programming Chapter 14 form scripts
