微信扫一扫打赏支持

js进阶 12-5 jquery中表单事件如何使用

js进阶 12-5 jquery中表单事件如何使用

一、总结

一句话总结：表单事件如何使用：可元素添加事件监听，然后监听元素，和javase里面一样。

 

1、表单获取焦点和失去焦点事件有哪两组？

注意是blur/focus和focus in/out，并没有给blur加什么

  • blur() 当元素失去焦点时触发 blur 事件。

    blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

  • focus() 当元素获得焦点时，触发 focus 事件。
  • focusin()当元素获得焦点时，触发 focusin 事件。

    focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

  • focusout()当元素失去焦点时触发 focusout 事件。

    focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

36         //具有获得焦点和失去焦点事件的元素有3个:单行文本框text；多行文本框textarea；下拉列表select；
37         // $('input').focus(function(){
38         //     $(this).css('background','#ccc')
39         // })
40         // $('input').blur(function(){
41         //     $(this).css('background','#fff')
42         // })

 

2、tab键可以触发blur事件么？

可以

 

3、focusin/focusout和focus/blur的区别是什么？

都是鼠标获取和失去焦点事件，但是

focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

也就是说：用focusin/focusout监听表单元素的祖先，也可以input的样式情况，从而方便给祖先或者input设置样式

44         // $('p').focusin(function(){
45         //     $(this).css('background','#ccc')
46         // })
47         // $('p').focusout(function(){
48         //     $(this).css('background','#fff')
49         // })
50         $('div').focusin(function(){
51             $(this).css('background','#ccc')
52         })
53         $('div').focusout(function(){
54             $(this).css('background','#fff')
55         })

 

4、表单事件如何使用？

可元素添加事件监听，然后监听元素

给你需要监听的元素添加事件监听

37         // $('input').focus(function(){
38         //     $(this).css('background','#ccc')
39         // })

 

5、focus/blur的监听对象是谁？

36         //具有获得焦点和失去焦点事件的元素有3个:单行文本框text；多行文本框textarea；下拉列表select；

 

6、focusin/focusout的监听对象是谁？

单行文本框text；多行文本框textarea；下拉列表select的父亲或者祖先

 

7、change()的监听对象是谁？

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。

56         $('textarea').change(function(){
57             var str=$(this).val()
58             $('#num').text(str.length)
59         })

 

8、select()的监听对象是谁？

单行文本框text或多行文本框textarea的文本

60         $('textarea').select(function(){
61             alert('文本被选中')
62         })

 

9、submit()的监听对象是谁？

form表单

63         $('form').submit(function(){
64             alert('确定要提交吗？')
65         })

 

10、jquery中form表单事件有哪些？

焦点*4，change/select（文本框*2），表单*1

 

11、select()和selected的区别是什么？

前者是文本框字体选中事件，后者是多选择的某个选项是否被选中

 

 

二、jquery中表单事件如何使用

1、相关知识

表单事件
  • blur() 当元素失去焦点时触发 blur 事件。

    blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

  • focus() 当元素获得焦点时，触发 focus 事件。
  • focusin()当元素获得焦点时，触发 focusin 事件。

    focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

  • focusout()当元素失去焦点时触发 focusout 事件。

    focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

  • change() 当元素的值发生改变时，会发生 change 事件。

    该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。

  • select() 当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。
  • submit() 当提交表单时，会发生 submit 事件。
 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10     p{width: 40%};
11   </style>
12 </style>
13 </head>
14 <body>
15 <h3>键盘事件-表单事件</h3>
16 <div>
17     <form action="#" id="myform">
18         <p>姓名：<input type="text" id="user"></p>
19         <p>密码：<input type="password" id="passw"></p>
20         <p>建议：<textarea name="" id="tarea" cols="30" rows="10"></textarea>
21         <br>textarea中已经输入了<span id="num">0</span>个字符
22         </p>
23         <p>
24             <select id="sel">
25                 <option value="">AAA</option>
26                 <option value="">BBB</option>
27                 <option value="">CCC</option>
28             </select><br>
29         </p>
30         <p>附件：<input type="file" id="fil"></p>
31         <input type="submit" value="提交">
32     </form>
33 </div>
34 <script type="text/javascript">
35     $(function(){
36         //具有获得焦点和失去焦点事件的元素有3个:单行文本框text；多行文本框textarea；下拉列表select；
37         // $('input').focus(function(){
38         //     $(this).css('background','#ccc')
39         // })
40         // $('input').blur(function(){
41         //     $(this).css('background','#fff')
42         // })
43 
44         // $('p').focusin(function(){
45         //     $(this).css('background','#ccc')
46         // })
47         // $('p').focusout(function(){
48         //     $(this).css('background','#fff')
49         // })
50         $('div').focusin(function(){
51             $(this).css('background','#ccc')
52         })
53         $('div').focusout(function(){
54             $(this).css('background','#fff')
55         })
56         $('textarea').change(function(){
57             var str=$(this).val()
58             $('#num').text(str.length)
59         })
60         $('textarea').select(function(){
61             alert('文本被选中')
62         })
63         $('form').submit(function(){
64             alert('确定要提交吗？')
65         })
66 
67     })
68 </script>
69 </body>
70 </html>

 

 

 

 
posted @ 2018-07-05 13:43  范仁义  阅读(464)  评论(0)  编辑  收藏  举报