Record my journey 9 JavaScript Dom Study Notes

Next we will go on journey 8 to continue our JavaScript Dom journey 9. In this blog, we mainly talk about the form object, the differences between different browsers when writing JavaScript code, and some knowledge points about using regular expressions in JavaScript, next, we have done two exercises to understand these knowledge points: Press enter to implement Tab jump and full text box.

1. Form object

(1) write a code segment for example.

1 <form id = "form1" action = "ball.htm" onsubmit = "if (document. getElementById ('name '). value. length <= 0) {alert ('cannot be blank '); return false;} "> 2 3 <input type =" text "id =" name "onblur =" document. getElementById ('form1 '). submit () "/> 4 5 <input type =" button "id =" btn1 "onclick =" alert ('I missed it ') "value =" one button "/> 6 7 <input type =" button "value =" I first submitted "onclick =" document. getElementById ('btn1 '). click () "/> 8 9 <input type =" button "value =" Submit it "onclick =" document. getElementById ('form1 '). submit () "/> 10 11 <input type =" submit "value =" verify Form "/> 12 13 </form>

 

(2) form objects are Dom objects of forms.

(3) method: submit submits a form, but does not trigger the onsubmit event.

(4) Implement autopost, that is, submit the page immediately after the focus leaves the control, instead of submitting the submit button. When the cursor leaves, the onblur event is triggered, call the form submit method in onblur.

(5) After clicking submit, the onsubmit event of form is triggered. data verification can be performed in onsubmit. If there is a problem with data, false is returned to cancel submission.

Example:

1 <form id = "form1" action = "dongoto.htm"> 2 3 <select onchange = "document. getElementById ('form1 '). submit () "> 4 5 <option> Jilin </option> 6 7 <option> Gansu </option> 8 9 <option> Beijing </option> 10 11 </select> 12 13 <input type = "submit"/> 14 15 </form>

 

1. Differences between different browsers

(1) interview question: how do you solve the differences between different browsers in the development project?

Appendchild, insertcell, px.

(2) Different methods are supported for Dom in different browsers.

1) Obtain which element of the webpage triggers the event and use srcElement in IE; use target in FireFox.

2) use Dom to get and change the text in the webpage Tag Element, use innerText in IE, and use textContent in FireFox.

3) dynamically bind events to webpages and elements. The method for binding events to IE is attachEvent. The method for binding events to FireFox is AddEventListener.

(3) different browsers have different support for CSS, so normal Web pages are displayed in IE, and all of them are messy under FF. the CSS used on the webpage is only supported by IE, FF is not supported.

(4) frameworks such as JQuery are encapsulated in s, which helps developers solve the differences between different browsers. Developers only need to call the Jquery method, jquery will help translate in different browsers. JQuery can solve Dom differences in different browsers.

1. Regular Expressions in JS

(1) method for creating a regular expression class in JavaScript:

1) var regex = new RegExp ("\ d {5}") or var regex = ^ d {5 }/

2)/Expressions/is the syntax provided by JavaScript to simplify the preparation of regular expressions. The regular expressions written in // do not need to be escaped.

(2) RegExp object Method

1) test (str) checks whether the string str matches a regular expression, which is equivalent to IsMatch.

Var regex =/. + @. + /;

Alert (regex. test ('2017 # qq.com '));

Alert (regex. test ('sss .ss.com '));

2) exec (str) performs search matching. The returned value is the matching result.

3) compile expressions to improve the running speed.

(3) Some methods related to regular expressions are provided in the string object, which is equivalent to packaging the RegExp class and simplifying the call.

1) match (regexp) is equivalent to calling exec.

Var s = 934532778@qq.com;

Var regex =/(. +) @ (. + )/;

S. match (regex );

Alert (regexp. $1); alert (RegExp. $2); // obtain the values of the first group and the second group.

1. Case 1

Press enter to jump to the Tab and respond to the onkeyDown event in the text box. window. event. keyCode gets the keycode you clicked. (*)

The keyCode and ASCII values are not exactly the same. The ASCII values of the primary and keypad 1 are the same, but the keyCode is different. The KeyCode of the carriage return is 13, and the keyCode of the tab is 9.

 1 <body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9}"> 2  3 <input type="text" /> 4  5 <input type="text" /> 6  7 <input type="text" /> 8  9 <input type="text" />10 11 </body>

 

1. Case 2

Full text box: the text box related to the amount in the financial system has the following requirements:

(1) enter the amount text box without the Chinese input method.

(2) You cannot enter a non-number.

(3) when the focus is in the text box, the text box is left aligned, and the text box is right aligned when the focus is out of the text box, showing the kilobytes.

Note: (1) disable the input method: style = "inne-mode: disabled ".

(2) do not enter invalid values. Only these values can be typed.

(3) Disable pasting (Great tester). <input onpaste = "return false;"> In the case of brute-force attacks, you should only disable pasting of invalid values and use clipboardData in onpaste. getData ('text') obtains the value in the clipboard and traverses each character to check whether it is a valid value. If all the values are valid, you can only paste them, paste is prohibited if there is an invalid value.

(4) add a sub-location

1 <script type = "text/javascript"> 2 3 function numkeyDown () {4 5 var k = window. event. keyCode; 6 7 return isValidNum (k); // judge whether K is a valid ASCII 8 9} 10 11 function isValidNum (k) {12 13 return (k = 9) | (k = 13) | (k = 46) | (k = 80) | (k = 189) | (k = 109) | (k = 190) | (k = 110) | (k> = 48 & k <= 57) | (k> = 96 & k = 105) | (k> = 37 & k <= 40); 14 15} 16 17 function numpaste () {18 19 var text = clipboardData. getData ("text"); 20 21 for (var I = 0; I <text. length; I ++) {22 23 var asc = text. charCodeAt (I); // charAt --> "3", charCodeAt uses the ASCII code 24 25 if (! IsValidNum (asc) {// the content to be pasted is illegal if an invalid value is encountered. 26 27 return false; 28 29} 30 31} 32 33} 34 35 </script> 36 37