<input>

The <input> element is mainly used for form components, and it inherits the HTMLInputElement interface.

HTMLInputElement instance attributes

Feature attributes

-name: A string representing the name of the <input> node. This attribute can be read and written. -type: string, which represents the type of <input> node. This attribute can be read and written. -disabled: Boolean value, indicating whether the use of the <input> node is prohibited. Once disabled, the <input> node will not be included when the form is submitted. This attribute can be read and written. -autofocus: Boolean value, indicating whether the element will automatically receive focus when the page is loaded. This attribute can be read and written. -required: Boolean value, indicating whether the <input> element is required when the form is submitted. This attribute can be read and written. -value: string, representing the value of the <input> node. This attribute can be read and written. -validity: returns a ValidityState object, which represents the verification state of the <input> node. This attribute is read-only. -validationMessage: A string representing the error message that the user sees when the verification of the <input> node fails. If the node does not require verification or passes verification, this attribute is an empty string. This attribute is read-only. -willValidate: Boolean value, indicating whether the <input> element will be validated when the form is submitted. This attribute is read-only.

-form: Returns the form (<form>) node where the <input> element is located. This attribute is read-only. -formAction: A string representing the server target when the form is submitted. This attribute is readable and writable. Once this attribute is set, it will override the action attribute of the form element. -formEncType: string, which indicates the encoding method of the data when the form is submitted. This attribute is readable and writable. Once this attribute is set, it will override the enctype attribute of the form element. -formMethod: A string representing the HTTP method when the form is submitted. This attribute is readable and writable. Once this attribute is set, it will override the method attribute of the form element. -formNoValidate: Boolean value, indicating whether to skip the verification when the form is submitted. This attribute is readable and writable. Once this attribute is set, the formNoValidate attribute of the form element will be overridden. -formTarget: a string representing the open location of the data returned by the server after the form is submitted. This attribute is readable and writable. Once this attribute is set, it will override the target attribute of the form element.

The unique attributes of the text input box

The following attributes are only valid when the <input> element can enter text.

-autocomplete: the string on or off, indicating that the input content of the <input> node can be automatically completed by the browser. This attribute can be read and written. -maxLength: Integer, indicating the maximum length of the string that can be entered. If it is set to a negative integer, an error will be reported. This attribute can be read and written. -size: Integer, representing the display length of the <input> node. If the type is text or password, the unit of this attribute is the number of characters, otherwise the unit is pixel. This attribute can be read and written. -pattern: A string representing the regular expression that the value of the <input> node should satisfy. This attribute can be read and written. -placeholder: string, representing the placeholder of the <input> node, as a reminder to the element. The string cannot contain carriage returns or line feeds. This attribute can be read and written. -readOnly: Boolean value, indicating whether the user can modify the value of the node. This attribute can be read and written. -min: string, which represents the minimum value or date of the node, and cannot be greater than the max attribute. This attribute can be read and written. -max: string, representing the maximum value or date of the node, and cannot be less than the min attribute. This attribute can be read and written. -selectionStart: Integer, indicating the starting position of the selected text. If no text is selected, return the position of the cursor inside the <input> element. This attribute can be read and written. -selectionEnd: Integer, indicating the end position of the selected text. If no text is selected, return the position of the cursor inside the <input> element. This attribute can be read and written. -selectionDirection: a string indicating the direction of the selected text. Possible values ​​include forward (consistent with the writing direction of the text), backward (opposite to the writing direction of the text), and none (the text direction is unknown). This attribute can be read and written.

Unique properties of checkboxes and radio buttons

If the type of <input> element is a checkbox (checkbox) or a radio (radio), it will have the following unique attributes.

-checked: Boolean value, indicating whether the <input> element is selected. This attribute can be read and written. -defaultChecked: Boolean value, indicating whether the <input> element is checked by default. This attribute can be read and written. -indeterminate: Boolean value, indicating whether the <input> element has not been determined yet. Once the user clicks once, this attribute will become false, indicating that the user has given a certain status. This attribute can be read and written.

Unique attributes of image buttons

If the type of the <input> element is image, it will become an image button with the following unique attributes.

-alt: String, alternative text when the image cannot be displayed. This attribute can be read and written. -height: A string representing the height of the element (in pixels). This attribute can be read and written. -src: A string indicating the source of the image of the element. This attribute can be read and written. -width: A string representing the width of the element (in pixels). This attribute can be read and written.

The unique attributes of the file upload button

If the type of the <input> element is file, it will become a file upload button with the following unique attributes.

-accept: A string indicating the file types that the element can accept, and the types are separated by commas. This attribute can be read and written. -files: returns a FileList instance object, which contains a set of File instance objects selected for upload.

Other attributes

-defaultValue: A string representing the original value of the <input> node. -dirName: a string that indicates the direction of the text. -accessKey: A string representing a letter key that gives the <input> node the focus. -list: returns a <datalist> node, which must be bound to the <input> element, and the type of the <input> element must be able to input text, otherwise it is invalid. This attribute is read-only. -multiple: Boolean value, indicating whether multiple values ​​can be selected. -labels: Returns a NodeList instance, representing the <label> element bound to the current <input> node. This attribute is read-only. -step: A string representing the value or time between the min attribute and the max attribute each time it is incremented or decremented. -valueAsDate: An instance of Date, once set, the value of the <input> element will be interpreted as the specified date. If the value of the attribute cannot be resolved, the value of the <input> node will be null. -valueAsNumber: Floating point number, the value of the current <input> element will be parsed as this value.

HTMLInputElement instance method

-focus(): The current <input> element has the focus. -blur(): Remove the focus of the <input> element. -select(): Select all the text inside the <input> element. This method does not guarantee that <input> gets the focus, it is best to use the focus() method first, and then use this method. -click(): Simulate a mouse click on the current <input> element. -setSelectionRange(): Select a piece of text inside the <input> element, but will not shift the focus to the selected text. This method accepts three parameters. The first parameter is the starting position (starting from 0), the second parameter is the ending position (not including this position), and the third parameter is optional, indicating the direction of selection. There are three possible values ​​(forward, backward and the default value none). -setRangeText(): New text replaces the selected text. This method accepts four parameters. The first parameter is the new text, the second parameter is the start position of the replacement (calculated from 0), the third parameter is the end position (this position is not included), and the third parameter is the end position (this position is not included). The four parameters represent the behavior after replacement (optional), and there are four possible values: select (select the newly inserted text), start (move the cursor position before the inserted text), end (cursor The position is moved after the inserted text), preserve (default value, if the original text is selected and the replacement position overlaps with the original selected position, the newly inserted text and the original selected text will be selected at the same time after the replacement. Otherwise, keep the original selected text). -setCustomValidity(): This method is used to customize the error message when the verification fails. Its parameter is the prompt message of the error. Note that once the custom error message is set, the field will not pass the verification. Therefore, when the user re-enters, the custom error message must be set to an empty string. Please see the example below. -checkValidity(): Returns a boolean value, indicating the verification result of the current node. If it returns false, it means that the verification requirements are not met, otherwise the verification is successful or the verification is unnecessary. -stepDown(): Decrease the value of the current <input> node by one step. This method can accept an integer n as a parameter, which means to reduce the step size of n at once, and the default is 1. There are several situations where an error will be thrown: the current <input> node is not suitable for decrement or increment, the current node does not have a step attribute, the value of the <input> node cannot be converted to a number, and the decremented value is less than min Attribute or greater than the max attribute. -stepUp(): Increase the value of the current <input> node by one step. Others are the same as the stepDown() method.

The following is an example of the setSelectionRange() method.

/* HTML code is as follows
  <p><input type="text" id="mytextbox" size="20" value="HelloWorld"/></p>
  <p><button onclick="SelectText()">Select text</button></p>
*/

function SelectText() {
  var input = document.getElementById("mytextbox");
  input.focus();
  input.setSelectionRange(2, 5);
}

In the above code, after clicking the button, the three characters llo will be selected.

The following is an example of setCustomValidity().

/* HTML code is as follows
  <form id="form">
    <input id="field" type="text" pattern="[af,0-9]{4}" autocomplete=off>
  </form>
*/

const form = document.querySelector("#form");
const field = document.querySelector("#field");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // Prevent this example from making POST requests
});

field.oninvalid = (event) => {
  event.target.setCustomValidity("Must be a 4-digit hexadecimal number");
};

field.oninput = (event) => {
  event.target.setCustomValidity("");
};

In the above code, a 4-digit hexadecimal number must be entered in the input box. If the conditions are not met (such as entering xxx), after pressing the Enter key, a custom error message will be prompted. Once the error message is customized, the input box will always be in a state of verification failure, so when you re-enter, you must set the custom error message to an empty string. In addition, in order to avoid the automatic completion prompt box covering the error message, the autocomplete attribute of the input box must be turned off.