jQuery --表單之change事件

時間 2019-11-11

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .result{
 8                 width: 300PX;
 9                 height: 100PX;
10                 border: solid;
11             }
12         </style>
13         <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
14 
15     </head>
16     <body>
17         <p>input 元素</p>
18         <p>監聽value值的變化，當有改變時，失去焦點後觸發change事件，對於單選按鈕和複選框，當用戶用鼠標做出選擇時，該事件當即被觸發</p>
19         <p>select元素</p>
20         <p>對於下拉選擇框，當用戶用鼠標做出選擇時，該事件當即觸發</p>
21         <p>texta</p>
22         <p>多行文本輸入框，當有改變時，失去焦點時觸發change事件</p>
23         
24         <div class='left'>
25             <input class="target1" type="text"  value="監聽input的改變"/>
26             
27         </div>
28         <div class='d1'>
29             select:
30             <select class="sl">
31                 <option value="option1" selected="selected">option1</option>
32                 <option value="option3" selected="selected">option3</option>
33 
34             </select>
35             
36         </div>
37         <div class='3'>textarea:
38             <textarea  class="aa3" rows="5" cols="30">多行文本的輸入控件
39             </textarea>
40             
41         </div>
42         <p>輸出結果：</p>
43         <div class="result"></div>
44         <script>
45             //監聽input的改變
46             $('.target1').change(function(e){
47                 $('.result').html(e.target.value);
48             });
49             //監聽select
50             $('.sl').change(function(e){
51                 $('.result').html(e.target.value);
52             });
53             //監聽textarea
54             $('.aa3').change(function(e){
55                 $('.result').html(e.target.value);
56             });
57         </script>
58     </body>
59 </html>