1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
(function($) {
module('jQuery#placeholder');
test('caches results of feature tests', function() {
strictEqual(typeof $.fn.placeholder.input, 'boolean', '$.fn.placeholder.input');
strictEqual(typeof $.fn.placeholder.textarea, 'boolean', '$.fn.placeholder.textarea');
});
if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
return;
}
var testElement = function($el) {
var el = $el[0];
var placeholder = el.getAttribute('placeholder');
strictEqual($el.placeholder(), $el, 'should be chainable');
strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`');
strictEqual($el.prop('value'), '', 'propHooks works properly');
strictEqual($el.val(), '', 'valHooks works properly');
ok($el.hasClass('placeholder'), 'should have `placeholder` class');
// test on focus
$el.focus();
strictEqual(el.value, '', '`value` should be the empty string on focus');
strictEqual($el.prop('value'), '', 'propHooks works properly');
strictEqual($el.val(), '', 'valHooks works properly');
ok(!$el.hasClass('placeholder'), 'should not have `placeholder` class on focus');
// and unfocus (blur) again
$el.blur();
strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`');
strictEqual($el.prop('value'), '', 'propHooks works properly');
strictEqual($el.val(), '', 'valHooks works properly');
ok($el.hasClass('placeholder'), 'should have `placeholder` class');
// change the value
$el.val('lorem ipsum');
strictEqual($el.prop('value'), 'lorem ipsum', '`$el.val(string)` should change the `value` property');
strictEqual(el.value, 'lorem ipsum', '`$el.val(string)` should change the `value` attribute');
ok(!$el.hasClass('placeholder'), '`$el.val(string)` should remove `placeholder` class');
// and clear it again
$el.val('');
strictEqual($el.prop('value'), '', '`$el.val("")` should change the `value` property');
strictEqual(el.value, placeholder, '`$el.val("")` should change the `value` attribute');
ok($el.hasClass('placeholder'), '`$el.val("")` should re-enable `placeholder` class');
// make sure the placeholder property works as expected.
strictEqual($el.prop('placeholder'), placeholder, '$el.prop(`placeholder`) should return the placeholder value');
$el.prop('placeholder', 'new placeholder');
strictEqual($el.prop('placeholder'), 'new placeholder', '$el.prop(`placeholder`, <string>) should set the placeholder value');
strictEqual($el.value, 'new placeholder', '$el.prop(`placeholder`, <string>) should update the displayed placeholder value');
$el.prop('placeholder', placeholder);
};
test('emulates placeholder for <input type=text>', function() {
testElement( $('#input-type-text') );
});
test('emulates placeholder for <input type=search>', function() {
testElement( $('#input-type-search') );
});
test('emulates placeholder for <input type=email>', function() {
testElement( $('#input-type-email') );
});
test('emulates placeholder for <input type=url>', function() {
testElement( $('#input-type-url') );
});
test('emulates placeholder for <input type=tel>', function() {
testElement( $('#input-type-tel') );
});
test('emulates placeholder for <input type=tel>', function() {
testElement( $('#input-type-tel') );
});
test('emulates placeholder for <input type=password>', function() {
var selector = '#input-type-password';
var $el = $(selector);
var el = $el[0];
var placeholder = el.getAttribute('placeholder');
strictEqual($el.placeholder(), $el, 'should be chainable');
// Re-select the element, as it gets replaced by another one in some browsers
$el = $(selector);
el = $el[0];
strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`');
strictEqual($el.prop('value'), '', 'propHooks works properly');
strictEqual($el.val(), '', 'valHooks works properly');
ok($el.hasClass('placeholder'), 'should have `placeholder` class');
// test on focus
$el.focus();
// Re-select the element, as it gets replaced by another one in some browsers
$el = $(selector);
el = $el[0];
strictEqual(el.value, '', '`value` should be the empty string on focus');
strictEqual($el.prop('value'), '', 'propHooks works properly');
strictEqual($el.val(), '', 'valHooks works properly');
ok(!$el.hasClass('placeholder'), 'should not have `placeholder` class on focus');
// and unfocus (blur) again
$el.blur();
// Re-select the element, as it gets replaced by another one in some browsers
$el = $(selector);
el = $el[0];
strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`');
strictEqual($el.prop('value'), '', 'propHooks works properly');
strictEqual($el.val(), '', 'valHooks works properly');
ok($el.hasClass('placeholder'), 'should have `placeholder` class');
});
test('emulates placeholder for <textarea></textarea>', function() {
testElement( $('#textarea') );
});
}(jQuery));
|
