JS Learning Notes 7_Form Scripts

##1. Methods to Get Form and Form Element References##

var mForm = document.forms[formName]; Get form reference

mForm.elements[elemName] Get form element, if there are elements with the same name, get a group of elements (such as radio button)

##2. Common Properties, Methods and Events of Form Elements##

Properties:

• name: field name

• value: field value

• type: field type, such as button, radio, etc.

• readOnly: set read-only

• disabled: set disabled

Methods:

• focus(): get focus

• blur(): lose focus

Events:

• focus: triggered when gaining focus

• blur: triggered when losing focus

• change: triggered when textbox input and textarea lose focus and value changes, triggered when select dropdown option changes

##3. Form Submission Methods##

1. Button submission

2. Code submission: form.submit();

3. Enter key submission: Press Enter in any form field except textarea

Note:

1. Code submission will not trigger submit event, therefore form data must be validated before this

2. Code reset will trigger reset event, but reset function is not commonly used in practical applications, because if user accidentally clicks reset, it will be very frustrating

##4. Types of Submit Buttons##

1. Generic submit button: <input type="submit">

2. Custom submit button: <button type="submit"></button>

3. Image button: <input type="image" src=url>

4. Other non-button elements: <a href=url onclick="forms['mForm'].submit();">Submit</a>

Note: The book says only when the form has one of the first three buttons, pressing Enter key will submit the form, but local testing in IE8, FF, Chrome found that all can submit (even if the form only has a textbox, Enter can also submit)

##5. Textbox/Textarea Select Partial/All Content (input/textarea)##

Mainstream method:

var text = document.forms[0].elements['userName'];
text.select();//Select all
text.setSelectionRange(0, 3);//Select first 3 characters (3 Chinese characters or letters)

[IE8-] Setting/Getting selected text method is different from mainstream method, setting selected method is as follows:

var range = text.createTextRange();
range.collapse();//Collapse range to start position
range.moveStart('character', 0);
range.moveEnd('character', 3);
range.select();

P.S. Selection is commonly used when implementing auto-complete textboxes, such as browser URL input box

##6. Accessing Clipboard##

For accessing clipboard, browser implementations vary, some browsers even do not support accessing clipboard, so don't try to modify inappropriate clipboard content to pass validation, but should prevent default behavior of these events, even disable shortcut keys when necessary

Can disable clipboard by canceling default behavior of paste/cut/copy events

##7. Common Properties and Methods of select##

Properties:

• options Get all Options of select
• selectedIndex Get index of selected item (-1 if none selected, for multiple selection it's the index of first selected item)

Methods:

• add(newOption, relOption); Insert newOption before relOption
• remove(index); Remove Option at index

##8. Common Properties and Methods of option##

Properties:

• selected Set selected

• index Get index of this item in options

Methods:

• Add Option:

   var newOption(text, value);//Generally text and value are the same, value is used for submitting data
   selectbox.add(newOption, undefined);//Insert at end
  

• Remove Option:

   selectbox.remove(index);//Remove item at index
   while(selectbox.options.length){//Remove all items
     selectbox.remove(0);
   }
  

##9. Two Ways to Implement Rich Text Box##

1. Insert iframe, set src to empty document, and set frames[iframeName].document.designMode = 'on'; to make body editable

2. Set contentEditable property of any element, such as p.contentEditable = 'true'; to make any element editable

Note:

1. The two methods given above are all-browser compatible, no need to worry about contentEditable being HTML5 property, because IE implemented it many years ago, local test shows [IE6+] all support it

2. contentEditable note the capital E, lowercase is invalid

3. Rich text box is not a form element, so it won't submit automatically, need to use hidden form field to carry rich text content

4. Although formatting of rich text box content is supported (bold, set foreground/background color, etc.), but specific implementations vary across browsers, thus same commands may generate different text content