Professional JavaScript for Web Developers 第四版學(xué)習(xí)筆記 CHAPTER 19:SCRIPTING FORMS
Form Basics 707
Submitting Forms 708
Resetting Forms 709
Form Fields 710
Common Form-Field Properties 711
Common Form-Field Methods 713
Common Form-Field Events 714
Scripting Text Boxes 715
Text Selection 716
The select Event 716
Retrieving Selected Text 717
Partial Text Selection 717
Input Filtering 718
Blocking Characters 719
Dealing with the Clipboard 720
Automatic Tab Forward 721
HTML5 Constraint Validation API 723
Required Fields 723
Alternate Input Types 723
Numeric Ranges 724
Input Patterns 724
Checking Validity 725
Disabling Validation 726
Scripting Select Boxes 726
Options Selection 728
Adding Options 730
Removing Options 730
Moving and Reordering Options 731
Form Serialization 732
Rich Text Editing 734
Using contenteditable 734
Interacting with Rich Text 735
Rich Text Selections 738
Rich Text in Forms 740
Summary 741
------------------------------------------------------
It’s possible to submit a form programmatically by calling the submit() method from JavaScript. This method can be called at any time to submit a form and does not require a submit button to be present in the form to function appropriately. Here’s an example:
let form = document.getElementById("myForm");
// submit the form
form.submit();
When a form is submitted via submit(), the submit event does not fire, so be sure to do data validation before calling the method.
the submit event is fired only by a submit button. ????????????
-------------------------------------------------------
In Firefox, Safari, and Chrome, the clipboardData object is available only during clipboard events to prevent unauthorized clipboard access; Internet Explorer exposes the clipboardData object all the time. For cross-browser compatibility, it’s best to use this object only during clipboard events.
There are three methods on the clipboardData object: getData(), setData(), and clearData().
function getClipboardText(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
function setClipboardText (event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}
-----------------------------------------------------------------------
you need to understand how the browser determines what gets sent to the server during a form submission:
1,F(xiàn)ield names and values are URL-encoded and delimited using an ampersand.
2,Disabled fields aren’t sent at all.
3,A check box or radio field is sent only if it is checked.
4,Buttons of type "reset" or "button" are never sent.
5,Multiselect fields have an entry for each value selected.
6,When the form is submitted by clicking a submit button, that submit button is sent; otherwise no submit buttons are sent. Any <input> elements with a type of "image" are treated the same as submit buttons.
7,The value of a <select> element is the value attribute of the selected <option>element. If the<option>element doesn’t have a value attribute, then the value is the text of the <option> element.
------------------------------------------------------------------------
designMode,contenteditable
// create link to www.wrox.com
document.execCommand("createlink", false, "http://www.wrox.com");
queryCommandEnabled(),queryCommandState(),queryCommandValue()
任務(wù):寫一個(gè)富文本編輯器