Học JavaScript qua ví dụ part 54

Hình thức và các sự kiện onChange Handler Việc xử lý sự kiện được kích hoạt onChange sau khi người dùng thay đổi các giá trị hoặc nội dung của một đầu vào HTML, lựa chọn, hoặc yếu tố vùng văn bản dưới hình thức một, và sau đó ra mắt chuột. Đây là một xử lý sự kiện mà có thể hữu ích trong việc kiểm tra hoặc chứng thực của người dùng. | Handling a Form Event 489 Figure Look at the status bar. You might have to enable the View Status Bar feature for your browser. Forms and the onChange Event Handler The onChange event handler is triggered after the user modifies the value or contents of an HTML input select or text area element in a form and then releases the mouse. This is another event handler that can be useful in checking or validating user input. EXAMPLE html head title onChange Event Handler title head body 1 form Please enter your grade 2 input type text onChange grade parseInt Convert to integer 3 if grade 0 grade 100 alert Please enter a grade between 0 and 100 4 else confirm Is grade correct 5 6 form body html From the Library of 490 Chapter 13 Handling Events EXPLANATION 1 2 3 4 5 6 The HTML form starts here. The input type is a text field. The onChange event is triggered when something changes in the text field box such as a user entering input. Instead of assigning a function to the handle the event the JavaScript statements are enclosed in double quotes and will be parsed and executed when the event is triggered. It might be less error prone to write a function than to try to keep this whole section of code enclosed in quotes. If the input assigned to grade is less than 0 or greater than 100 it is out of the legal range causing an alert box to appear. If the input was within the limits then the else block is executed. A confirm box will appear to verify that this is what the user meant to type. This quote marks the end of the JavaScript statements and the marks the end of the input type tag. The HTML form ends here. The actions of the handler are shown in Figures through . Figure The user enters no value at all There is no change. Figure The user enters a value. A change has taken place within the textbox. The onChange handler is invoked. Figure The user enters a value. The onChange handler is invoked. The .