Select / Unselect text on click Using jQuery
I want to create the following behavior in IE9:
By clicking on the text box, select the text from the text box. Pressing this button again deselects the text.
I tried the following from this linK: http://www.codingforums.com/showthread.php?t=105530
var x = 2;
function selectIt(obj)
{
if (x % 2 == 0)
{
obj.select();
}
else
{
if (document.selection)
{
document.selection.empty();
obj.blur();
}
else
{
window.getSelection().removeAllRanges();
}
}
obj.focus();
x++;
}
I've also used this: http://jsfiddle.net/HmQxZ/1/
But the above solutions have strange behavior when applied to multiple text fields. What is the best way to approach this problem. Can this be done without using a global variable?
UPDATE:
Violin works in Chrome. But this doesn't work in IE9. In IE9, the text is selected, but when you click on the textbox again, the text is not selected / highlighted. In Chrome, second click does not display / highlight text.
Thank.
source to share
The problem with multiple text boxes will be that your variable x
is global. You will need a separate variable x
for each text box.
You can use the map:
var x = {};
function selectIt(obj)
{
var key = ... <-- get name (or id) of textbox from obj somehow to use as key in map
if (!x.hasOwnProperty(key)) x[key] = 0;
if (x[key] % 2 == 0)
{
obj.select();
}
else
{
if (document.selection)
{
document.selection.empty();
obj.blur();
}
else
{
window.getSelection().removeAllRanges();
}
}
obj.focus();
x[key]++;
}
source to share
This works for me in Chrome - jQuery has a toggle event function , but in this case it is not needed
$('input').click(function() {
// the select() function on the DOM element will do what you want
this.select();
});
but i suggest you tell the script what field types you want to select
$("input[type=text], input[type=url]").click(function() {
$(this).select(); // "this" is native JS
});
source to share
Here is your complete solution.
Demo http://codebins.com/bin/4ldqp79
Html
<div id="panel">
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
</div>
JQuery
$(function() {
$("#panel input[type=text]").click(function() {
$(this).select();
});
});
CSS
input{
display:block;
border:1px solid #333;
background:#efefef;
margin-top:15px;
padding:3px;
}
source to share