Professional JavaScript for Web Developers 第四版学习笔记 CHAPTER 19:SCRIPTING FORMS

欢欢欢欢 发表于 2021-9-27 08:28

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,Field 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()

任务:写一个富文本编辑器