Form Script
When the form is submitted by clicking on the submit button, the browser will send the request to the server before triggering submit event. This gives us the opportunity to validate form data, and submit the data to decide whether to allow forms. Prevent the default behavior of this event can cancel the form submission.
In JavaScript, programmatically call the submit () method can also submit the form, submit the form to programmatically does not trigger the submit event, so remember that before calling this method to validate form data.
The biggest problem may occur when the form is submitted, it is to repeat the form is submitted. The solution to this problem is twofold: to disable the submit button after first submitting a form, or use the onsubmit event handler to cancel subsequent form submission.
And submit the form, as the form can also be reset by JavaScript, but the difference is, call the reset () method will be the same as clicking the Reset button reset trigger event.
Reset Form demand rare. More common practice is to provide a Cancel button, so the user can return to the previous page. And all values are not reset regardless of indiscriminate form.
Use focus () method, the user's attention can be drawn to a location on the page. For example, when the page is loaded, the focus to form the first field. In the early Web development, then form fields not readonly properties, you can create read-only field method using a blur.
For input and textarea elements when they receive focus from the focus and value to lose value changes, the change will trigger event. For select elements, as long as the user selects a different option, it will trigger the change event. (P418)
Number for the text box, size characteristics, can be specified in the text box can display characters. By characteristic value, set an initial value of the text box, and the maxlength characteristics specified maximum number of characters of the text box can be received.
Whether a text box with multiple lines of text box What is the difference in the mark, but they will save the user input in the value property. At the same time the two versions box support select () method, which is used to select all the text in the text box. (P422)
tabIndex switching field indicates the current characteristic (tab) number.
Insert characters into the text box in response to the operation of a keypress event. Certain types of characters can be masked by preventing the default behavior of this event. (P424)
1
2
3
4
5// shielded non-numeric keys
IF (/d/.test (the String.fromCharCode (the charCode)) && the charCode>. 9 &&!
Event.ctrlKey!) {
EventUtil.preventDefault (Event);
}JavaScript can use many ways to enhance ease of use form fields. The most common way is when the user is filling out the current field automatically switch focus to the next field. Typically before the automatic shift focus you must know the user has input data defined length.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength){
var form = target.form;
for (var i=0, len=form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();With the advent of Ajax, the form serialization becoming more common. In JavaScript, form field type attribute may be utilized, along with the name and value attribute of the form of realization of the sequence together. During form submission, the browser is how to send data to the server:
- Name and value of the form fields will be URL-encoded using & separated.
- Do not send disabling form fields
- Just send the check box and radio buttons
- Do not send type is "reset" and "button" button
- Multiple choice selection box for each selected value of a single entry
- Case Click the Submit button to submit the form, it will send the submit button; otherwise, do not send the submit button
- The value of select element is the value of the value attribute of the selected option element. If the option element has no value characteristics, it is the text value option elements.
Rich text editing, also called WYSIWYG (What You See Is What You Get, WYSIWYG). The essence of this technology is embedded iframe contains a blank HTML page in the page. By setting designMode property, this gap HTML page can be edited, and edit the object is a body element of the page of HTML code. designMode attribute has two possible values: "off" (default) and "on". When set to "on", the entire document will become can edit (caret), then you may like to use the same word processing software.
designMode property needs to set after the page is fully loaded, therefore, included in the page, use the onload event handler setup designMode at the right moment. (P438)
Another way to edit rich text content is to use a special property called contenteditable, you can use the contenteditable attribute to any element on the page, and then the user can immediately edit the element.
Operating rich text, rich text, and select a form with rich text content can see P439 page.
Original: Big Box JavaScript Advanced Programming (xv)