JavaScript Advanced Programming Chapter 14th-form scripting

JavaScript Advanced Programming Chapter 14th-form scripting
In HTML the form is represented by the <form> element, and in JS the form corresponds to the htmlformelement type, which also has many properties
and methods, get a reference to a FORM element or add an id attribute to it, and use DOM operations to get form elements;
Submit form: Set the type attribute of the <input> or <button> element to "submit", and the image button to set the Type property of the <input> element
is set to "image", you can also call the Submit () method, and the Prevetndefault () method can prevent the form from being submitted
Reset form: Set the type attribute of the <input> or <button> element to "reset", or you can call the Reset () method
form fields: Each form has a elements property, which is an ordered list of elements that contain all the fields of the form.
Returns a nodelist if it is multiple identical elements; All form fields have the same properties, such as: Disabled, form,
Name, ReadOnly, TabIndex, type, value, and so on, accessing these properties to get information about form fields; All form fields have focus ()
and the Blur () method, these two methods simply shift or remove the focus.
text Box script
<input> represents a single-line text box,<textarea> represents a multiline text box, and most of them are similar, but can no longer be in HTML for <textarea>
Specifies the maximum number of characters;
Select text: Call the Select () method to choose the text in the text box, which calls the no-receive parameter directly, but triggers the Select event;
Gets the selected text to add the SelectionStart and Selectionend attributes, which represent the range of the selection text; the substring () method is based on the
The offset of the string to perform the operation; Select part of the text call Setselectionrange () method, this method receives two parameters, to select the
The first character index and the last character index.
Filter input
Masking characters: Similar to blocking form submissions Prevetndefault () can be used to block all keystrokes, although using such methods to combine regular
and character encoding
Action Clipboard: There are the following 6 actions Clipboard events: beforecopy, copy, Beforecut, Cut, beforepaste, paste, to access the clip
To use the Clipboarddata object, which is also a property of the Window object and the event object, Operation Clipboarddata
The main objects are three methods, GetData (), SetData (), ClearData () to get data from the Clipboard
Required field: Specify Required property for form fields
Disabling validation: Setting the Novalidate property sheet can be done without validation
Select Box Script
The selection box is created with <select> and <option> elements, and the Htmlselectelement type also provides a number of properties and methods, where value
property is determined by the selection, if no item is selected to return an empty string, if the value attribute does not specify the text content of the return option, the
The change event is triggered whenever an option is selected
Select options: Access to the selected item is done by using the SelectedIndex property, but the SelectedIndex property only allows the selection of the same
Add options: You can use the DOM method to add a node to the text and set its Value property to be added to the selection box, and the second method is to use the
The option constructor to create a new option to receive text values and value values; The third method is to call the Add () method and accept two parameters: to add
New options and options that will be located after the new option.
Removal options: 1. RemoveChild () method using the DOM Operation 2. Remove () method using the Selection Box 3. Set the corresponding value to null
Rich Text editing: The essence of rich text editing is to embed an IFRAME in the page that contains an empty HTML page, by setting the DesignMode
property to the "on" value, you can edit the text content, and another way to edit rich text is to use the name Contenteditable property, which
Attributes can be applied to any element in the page, and the element that sets this property is like a <textarea> element
Manipulating Rich Text: the main way to interact with a rich text editor is to use the Document.execcommand () method, which requires passing three parameters
The command name to execute, FALSE, a value to execute the command, and the queryCommandEnabled () method to detect whether it can be
The currently selected text executes a command, and the result returns a Boolean value; the Querycommandvalue () method is used to get the command passed in
The value
form fields Rich Text: HTML in the Rich Text editor is not automatically submitted to the server, it needs to be manually extracted and submitted HTML, because we
The Rich text editor you build is not a form field, so you must put the IFRAME or contenteditable before you submit its content to the server
The HTML in the element is copied into a form field

JavaScript Advanced Programming Chapter 14th-form scripting