Skip to content

Commit bfb41e2

Browse files
agcolomscottgonzalez
agcolom
authored and
scottgonzalez
committed
Code indentation and formatting (k and l entries)
1 parent 2f54b03 commit bfb41e2

13 files changed

+374
-239
lines changed

‎entries/keydown.xml

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -21,73 +21,86 @@
2121
</signature>
2222
<desc>Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.</desc>
2323
<longdesc>
24-
<p>This method is a shortcut for <code>.on('keydown', handler)</code> in the first and second variations, and <code>.trigger('keydown')</code> in the third.</p>
24+
<p>This method is a shortcut for <code>.on( "keydown", handler )</code> in the first and second variations, and <code>.trigger( "keydown" )</code> in the third.</p>
2525
<p>The <code>keydown</code> event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
2626
<p>For example, consider the HTML:</p>
27-
<pre><code>&lt;form&gt;
28-
&lt;input id="target" type="text" value="Hello there" /&gt;
27+
<pre><code>
28+
&lt;form&gt;
29+
&lt;input id="target" type="text" value="Hello there"&gt;
2930
&lt;/form&gt;
3031
&lt;div id="other"&gt;
3132
Trigger the handler
32-
&lt;/div&gt;</code></pre>
33+
&lt;/div&gt;
34+
</code></pre>
3335
<p>The event handler can be bound to the input field:</p>
34-
<pre><code>$('#target').keydown(function() {
35-
alert('Handler for .keydown() called.');
36-
});</code></pre>
36+
<pre><code>
37+
$( "#target" ).keydown(function() {
38+
alert( "Handler for .keydown() called." );
39+
});
40+
</code></pre>
3741
<p>Now when the insertion point is inside the field, pressing a key displays the alert:</p>
3842
<p>
3943
<samp>Handler for .keydown() called.</samp>
4044
</p>
4145
<p>To trigger the event manually, apply <code>.keydown()</code> without an argument:</p>
42-
<pre><code>$('#other').click(function() {
43-
$('#target').keydown();
44-
});</code></pre>
46+
<pre><code>
47+
$( "#other" ).click(function() {
48+
$( "#target" ).keydown();
49+
});
50+
</code></pre>
4551
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
4652
<p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
47-
<p>To determine which key was pressed, examine the <a href="http://api.jquery.com/category/events/event-object/">event object</a> that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the <code>.which</code> property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, <code>.keypress()</code> may be a better choice.</p>
53+
<p>To determine which key was pressed, examine the <a href="/category/events/event-object/">event object</a> that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the <code>.which</code> property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, <code>.keypress()</code> may be a better choice.</p>
4854
</longdesc>
4955
<example>
5056
<desc>Show the event object for the keydown handler when a key is pressed in the input.</desc>
5157
<code><![CDATA[
5258
var xTriggered = 0;
53-
$('#target').keydown(function(event) {
54-
if (event.which == 13) {
59+
$( "#target" ).keydown(function( event ) {
60+
if ( event.which == 13 ) {
5561
event.preventDefault();
5662
}
5763
xTriggered++;
58-
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
59-
$.print(msg, 'html');
60-
$.print(event);
64+
var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
65+
$.print( msg, "html" );
66+
$.print( event );
6167
});
6268
63-
$('#other').click(function() {
64-
$('#target').keydown();
65-
});]]></code>
69+
$( "#other" ).click(function() {
70+
$( "#target" ).keydown();
71+
});
72+
]]></code>
6673
<css><![CDATA[
67-
fieldset { margin-bottom: 1em; }
68-
input { display: block; margin-bottom: .25em; }
69-
#print-output {
70-
width: 100%;
71-
}
72-
.print-output-line {
73-
white-space: pre;
74-
padding: 5px;
75-
font-family: monaco, monospace;
76-
font-size: .7em;
77-
}
78-
74+
fieldset {
75+
margin-bottom: 1em;
76+
}
77+
input {
78+
display: block;
79+
margin-bottom: .25em;
80+
}
81+
#print-output {
82+
width: 100%;
83+
}
84+
.print-output-line {
85+
white-space: pre;
86+
padding: 5px;
87+
font-family: monaco, monospace;
88+
font-size: .7em;
89+
}
7990
]]></css>
8091
<height>460</height>
81-
<html><![CDATA[<form>
92+
<html><![CDATA[
93+
<form>
8294
<fieldset>
8395
<label for="target">Type Something:</label>
84-
<input id="target" type="text" />
96+
<input id="target" type="text">
8597
</fieldset>
8698
</form>
8799
<button id="other">
88100
Trigger the handler
89101
</button>
90-
<script type="text/javascript" src="/resources/events.js"></script>]]></html>
102+
<script type="text/javascript" src="/resources/events.js"></script>
103+
]]></html>
91104
</example>
92105
<category slug="events/keyboard-events"/>
93106
<category slug="version/1.0"/>

‎entries/keypress.xml

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,36 @@
2222
</signature>
2323
<longdesc>
2424
<p><strong>Note:</strong> as the <code>keypress</code> event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.</p>
25-
<p>This method is a shortcut for <code>.on('keypress', handler)</code> in the first two variations, and <code>.trigger('keypress')</code> in the third.</p>
25+
<p>This method is a shortcut for <code>.on( "keypress", handler )</code> in the first two variations, and <code>.trigger( "keypress" )</code> in the third.</p>
2626
<p>The <code>keypress</code> event is sent to an element when the browser registers keyboard input. This is similar to the <code>keydown</code> event, except that modifier and non-printing keys such as <kbd>Shift</kbd>, <kbd>Esc</kbd>, and <kbd>delete</kbd> trigger <code>keydown</code> events but not <code>keypress</code> events. Other differences between the two events may arise depending on platform and browser.</p>
2727
<p>A <code>keypress</code> event handler can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form controls can always get focus so are reasonable candidates for this event type.</p>
2828
<p>For example, consider the HTML:</p>
29-
<pre><code>&lt;form&gt;
29+
<pre><code>
30+
&lt;form&gt;
3031
&lt;fieldset&gt;
31-
&lt;input id="target" type="text" value="Hello there" /&gt;
32+
&lt;input id="target" type="text" value="Hello there"&gt;
3233
&lt;/fieldset&gt;
3334
&lt;/form&gt;
3435
&lt;div id="other"&gt;
3536
Trigger the handler
36-
&lt;/div&gt;</code></pre>
37+
&lt;/div&gt;
38+
</code></pre>
3739
<p>The event handler can be bound to the input field:</p>
38-
<pre><code>$("#target").keypress(function() {
39-
console.log("Handler for .keypress() called.");
40-
});</code></pre>
40+
<pre><code>
41+
$( "#target" ).keypress(function() {
42+
console.log( "Handler for .keypress() called." );
43+
});
44+
</code></pre>
4145
<p>Now when the insertion point is inside the field, pressing a key displays the log:</p>
4246
<p>
4347
<samp>Handler for .keypress() called.</samp>
4448
</p>
4549
<p>To trigger the event manually, apply <code>.keypress()</code> without an argument:</p>
46-
<pre><code>$('#other').click(function() {
47-
$("#target").keypress();
48-
});</code></pre>
50+
<pre><code>
51+
$( "#other" ).click(function() {
52+
$( "#target" ).keypress();
53+
});
54+
</code></pre>
4955
<p>After this code executes, clicks on the <samp>Trigger the handler</samp> div will also log the message.</p>
5056
<p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
5157
<p>To determine which character was entered, examine the <code>event</code> object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the <code>.which</code> property so you can reliably use it to retrieve the character code.</p>
@@ -55,7 +61,7 @@
5561
<desc>Show the event object when a key is pressed in the input. Note: This demo relies on a simple $.print() plugin (http://api.jquery.com/resources/events.js) for the event object's output.</desc>
5662
<code><![CDATA[
5763
var xTriggered = 0;
58-
$("#target").keypress(function(event) {
64+
$( "#target" ).keypress(function( event ) {
5965
if ( event.which == 13 ) {
6066
event.preventDefault();
6167
}
@@ -65,35 +71,41 @@ $("#target").keypress(function(event) {
6571
$.print( event );
6672
});
6773
68-
$("#other").click(function() {
69-
$("#target").keypress();
70-
});]]></code>
74+
$( "#other" ).click(function() {
75+
$( "#target" ).keypress();
76+
});
77+
]]></code>
7178
<css><![CDATA[
72-
fieldset { margin-bottom: 1em; }
73-
input { display: block; margin-bottom: .25em; }
74-
#print-output {
75-
width: 100%;
76-
}
77-
.print-output-line {
78-
white-space: pre;
79-
padding: 5px;
80-
font-family: monaco, monospace;
81-
font-size: .7em;
82-
}
83-
79+
fieldset {
80+
margin-bottom: 1em;
81+
}
82+
input {
83+
display: block;
84+
margin-bottom: .25em;
85+
}
86+
#print-output {
87+
width: 100%;
88+
}
89+
.print-output-line {
90+
white-space: pre;
91+
padding: 5px;
92+
font-family: monaco, monospace;
93+
font-size: .7em;
94+
}
8495
]]></css>
8596
<height>460</height>
86-
<html><![CDATA[<form>
97+
<html><![CDATA[
98+
<form>
8799
<fieldset>
88100
<label for="target">Type Something:</label>
89-
<input id="target" type="text" />
101+
<input id="target" type="text">
90102
</fieldset>
91103
</form>
92104
<button id="other">
93105
Trigger the handler
94106
</button>
95107
<script src="http://api.jquery.com/resources/events.js"></script>
96-
]]></html>
108+
]]></html>
97109
</example>
98110
<category slug="events/keyboard-events"/>
99111
<category slug="version/1.0"/>

‎entries/keyup.xml

Lines changed: 46 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,33 @@
2121
<added>1.0</added>
2222
</signature>
2323
<longdesc>
24-
<p>This method is a shortcut for <code>.on('keyup', handler)</code> in the first two variations, and <code>.trigger('keyup')</code> in the third.</p>
24+
<p>This method is a shortcut for <code>.on( "keyup", handler )</code> in the first two variations, and <code>.trigger( "keyup" )</code> in the third.</p>
2525
<p>The <code>keyup</code> event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
2626
<p>For example, consider the HTML:</p>
27-
<pre><code>&lt;form&gt;
28-
&lt;input id="target" type="text" value="Hello there" /&gt;
27+
<pre><code>
28+
&lt;form&gt;
29+
&lt;input id="target" type="text" value="Hello there"&gt;
2930
&lt;/form&gt;
3031
&lt;div id="other"&gt;
3132
Trigger the handler
32-
&lt;/div&gt;</code></pre>
33+
&lt;/div&gt;
34+
</code></pre>
3335
<p>The event handler can be bound to the input field:</p>
34-
<pre><code>$('#target').keyup(function() {
35-
alert('Handler for .keyup() called.');
36+
<pre><code>
37+
$( "#target" ).keyup(function() {
38+
alert( "Handler for .keyup() called." );
3639
});
37-
</code></pre>
40+
</code></pre>
3841
<p>Now when the insertion point is inside the field and a key is pressed and released, the alert is displayed:</p>
3942
<p>
4043
<samp>Handler for .keyup() called.</samp>
4144
</p>
4245
<p>To trigger the event manually, apply <code>.keyup()</code> without arguments:</p>
43-
<pre><code>$('#other').click(function() {
44-
$('#target').keyup();
45-
});</code></pre>
46+
<pre><code>
47+
$( "#other" ).click(function() {
48+
$( "#target" ).keyup();
49+
});
50+
</code></pre>
4651
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
4752
<p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
4853
<p>To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the <code>.which</code> property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, <code>.keypress()</code> may be a better choice.</p>
@@ -51,45 +56,52 @@
5156
<desc>Show the event object for the keyup handler (using a simple $.print plugin) when a key is released in the input.</desc>
5257
<code><![CDATA[
5358
var xTriggered = 0;
54-
$('#target').keyup(function(event) {
59+
$( "#target" ).keyup(function( event ) {
5560
xTriggered++;
56-
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
57-
$.print(msg, 'html');
58-
$.print(event);
59-
}).keydown(function(event) {
60-
if (event.which == 13) {
61+
var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
62+
$.print( msg, "html" );
63+
$.print( event );
64+
}).keydown(function( event ) {
65+
if ( event.which == 13 ) {
6166
event.preventDefault();
6267
}
6368
});
6469
65-
$('#other').click(function() {
66-
$('#target').keyup();
67-
});]]></code>
70+
$( "#other").click(function() {
71+
$( "#target" ).keyup();
72+
});
73+
]]></code>
6874
<css><![CDATA[
69-
fieldset { margin-bottom: 1em; }
70-
input { display: block; margin-bottom: .25em; }
71-
#print-output {
72-
width: 100%;
73-
}
74-
.print-output-line {
75-
white-space: pre;
76-
padding: 5px;
77-
font-family: monaco, monospace;
78-
font-size: .7em;
79-
}
80-
75+
fieldset {
76+
margin-bottom: 1em;
77+
}
78+
input {
79+
display: block;
80+
margin-bottom: .25em;
81+
}
82+
#print-output {
83+
width: 100%;
84+
}
85+
.print-output-line {
86+
white-space: pre;
87+
padding: 5px;
88+
font-family: monaco, monospace;
89+
font-size: .7em;
90+
}
8191
]]></css>
8292
<height>460</height>
83-
<html><![CDATA[<form>
93+
<html><![CDATA[
94+
<form>
8495
<fieldset>
8596
<label for="target">Type Something:</label>
86-
<input id="target" type="text" />
97+
<input id="target" type="text">
8798
</fieldset>
8899
</form>
89100
<button id="other">
90101
Trigger the handler
91102
</button>
92-
<script type="text/javascript" src="/resources/events.js"></script>]]></html>
103+
<script type="text/javascript" src="/resources/events.js"></script>
104+
]]></html>
93105
</example>
94106
<category slug="events/keyboard-events"/>
95107
<category slug="version/1.0"/>

0 commit comments

Comments
 (0)