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
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.select()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/events/" title="View all posts in Events">Events</a> > <a href="http://api.jquery.com/category/events/form-events/" title="View all posts in Form Events">Form Events</a></span> | <span class="category"><a href="http://api.jquery.com/category/forms/" title="View all posts in Forms">Forms</a></span>
</div>
</div>
<div id="select1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.select( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Bind an event handler to the "select" JavaScript event, or trigger that event on an element.</p>
<ul class="signatures">
<li class="signature" id="select-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.select( 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="select-eventData-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4.3/">1.4.3</a></span>.select( [eventData], handler(eventObject) )</h4>
<p class="arguement"><strong>eventData</strong>A map of data that will be passed to the event handler.</p>
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
</li>
<li class="signature" id="select"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.select()</h4></li>
</ul>
<div class="longdesc">
<p>This method is a shortcut for <code>.bind('select', handler)</code> in the first two variations, and <code>.trigger('select')</code> in the third.</p>
<p>The <code>select</code> event is sent to an element when the user makes a text selection inside it. This event is limited to <code><input type="text"></code> fields and <code><textarea></code> boxes.</p>
<p>For example, consider the HTML:</p>
<pre><form>
<input id="target" type="text" value="Hello there" />
</form>
<div id="other">
Trigger the handler
</div></pre>
<p>The event handler can be bound to the text input:</p>
<pre>$('#target').select(function() {
alert('Handler for .select() called.');
});</pre>
<p>Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, apply <code>.select()</code> without an argument:</p>
<pre>$('#other').click(function() {
$('#target').select();
});</pre>
<p>After this code executes, clicks on the Trigger button will also alert the message:</p>
<p><span class="output">Handler for .select() called.</span></p>
<p>In addition, the default <code>select</code> action on the field will be fired, so the entire text field will be selected.</p>
<blockquote><p>The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.</p></blockquote>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">To do something when text in input boxes is selected:</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; }
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>
Click and drag the mouse to select text in the inputs.
</p>
<input type="text" value="Some text" />
<input type="text" value="to test on" />
<div></div>
<script>
$(":input").select( function () {
$("div").text("Something was selected").show().fadeOut(1000);
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">To trigger the select event on all input elements, try:</span>
</h4>
<pre class="prettyprint"><code class="example">$("input").select();</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
