Bug Tracker

Ticket #4668: inputjquery.html

File inputjquery.html, 1.1 KB (added by jacobrask, 11 years ago)

html5 input types grabbed with JS and jQuery

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <meta charset="utf-8">
5        <title>jQuery input test case</title>
6
7        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
8        <script>
9                $(function(){
10                        $('input').each(function() {
11                                lbl = $(this).closest('label');
12                                jqType = $(this).attr('type');
13                                jsType = this.getAttribute('type');
14                                lbl.
15                                        prepend('<span class="jq">'+jqType+'</span>').
16                                        prepend('<span class="js">'+jsType+'</span>');
17                        });
18                })
19        </script>
20
21        <style>
22                fieldset {
23                        width: 200px;
24                }
25                label {
26                        width: 200px;
27                        padding: 0 0 20px;
28                        display: block;
29                }
30                .jq {
31                        background: red;
32                }
33                .js {
34                        background: green;
35                }
36        </style>
37</head>
38<body>
39
40<p>Green values in label are grabbed by <code>getAttribute</code>, red by jQuerys <code>attr</code>.</p>
41<fieldset>
42        <legend>jQuery Input Types</legend>
43        <label id=text>
44                <input type=text>
45        </label>
46        <label id=url>
47                <input type=url>
48        </label>
49        <label id=email>
50                <input type=email>
51        </label>
52        <label id=search>
53                <input type=search>
54        </label>
55</fieldset>
56<p>Only confirmed browser where jQuery gets the right types is Opera.</p>
57</body>
58</html>