mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
57 lines
No EOL
2.9 KiB
HTML
57 lines
No EOL
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div class="ui-page">
|
|
<div class="ui-header">
|
|
<h1>.blur()</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="blur1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.blur( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.</p>
|
|
<ul class="signatures">
|
|
<li class="signature" id="blur-handlereventObject">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.blur( handler(eventObject) )</h4>
|
|
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
|
</li>
|
|
<li class="signature" id="blur"><h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.blur()</h4></li>
|
|
</ul>
|
|
<div class="longdesc">
|
|
<p>This method is a shortcut for <code>.bind('blur', handler)</code> in the first variation, and <code>.trigger('blur')</code> in the second.</p>
|
|
<p>The <code>blur</code> event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <code><input></code>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.</p>
|
|
<p>For example, consider the HTML:</p>
|
|
<pre><form>
|
|
<input id="target" type="text" value="Field 1" />
|
|
<input type="text" value="Field 2" />
|
|
</form>
|
|
<div id="other">
|
|
Trigger the handler
|
|
</div>
|
|
The event handler can be bound to the first input field:
|
|
$('#target').blur(function() {
|
|
alert('Handler for .blur() called.');
|
|
});</pre>
|
|
<p>Now if the first field has the focus and we click elsewhere, or tab away from it, the alert is displayed:</p>
|
|
<p><span class="output">Handler for .blur() called.</span></p>
|
|
<p>We can trigger the event when another element is clicked:</p>
|
|
<pre>$('#other').click(function() {
|
|
$('#target').blur();
|
|
});</pre>
|
|
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
|
|
<p>The <code>blur</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>blur</code> event will not work consistently across browsers.</p>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">To trigger the blur event on all paragraphs:</span></h4>
|
|
<pre><code class="example">$("p").blur();</code></pre>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |