I have a bunch of text inputs each inside a table cell like this:
<td class="tdTextInput">
<input type="text" value="0" name="txt1_9_4_2" id="txt1_9_4_2" class="input-supermini">
</td>
Whenever the user clicks on the cell or the input it must automatically select all the content inside the input (kind of like a spreadsheet editor).
So here is the script that so far achieves it successfully only in trusty old Firefox.
//focus the textbox on td click
$('.tdTextInput').mousedown(function ()
{
$(this).find('input').first().focus();
});
//select all text on focus
$('.tdTextInput input').focus(function ()
{
//the data-selected attribute is used to prevent the
// autoselection to happen more than once per cell so that
// two consecutive clicks will allow the user to pinpoint the
// cursor to a specific position
var isSelected = $(this).attr('data-selected') == 'true';
if (!isSelected) {
$('input[data-selected]').removeAttr('data-selected');
$(this).attr('data-selected', 'true');
$(this).select();
}
});
//prevent non-numeric values from being added
$('.tdTextInput input').keydown(function (e)
{
CommonTools.IsNumeric(e);
});
CommonTools.IsNumeric
refers to the following: -(probably not relevant though since the keydown function is not the issue. Only adding it in the question for pleteness)
isNumeric = function (e)
{
if(!(e.which>=48 && e.which<=57)) //numeric values only
e.preventDefault();
}
Why is this only working in FF and IE and not in Chrome?
UPDATE: I've created a fiddle here: /, however it doesn't even work in FF or IE in the fiddle either.
Some more info: When I click on the cell it selects all the text until I release the mouse click.
I have a bunch of text inputs each inside a table cell like this:
<td class="tdTextInput">
<input type="text" value="0" name="txt1_9_4_2" id="txt1_9_4_2" class="input-supermini">
</td>
Whenever the user clicks on the cell or the input it must automatically select all the content inside the input (kind of like a spreadsheet editor).
So here is the script that so far achieves it successfully only in trusty old Firefox.
//focus the textbox on td click
$('.tdTextInput').mousedown(function ()
{
$(this).find('input').first().focus();
});
//select all text on focus
$('.tdTextInput input').focus(function ()
{
//the data-selected attribute is used to prevent the
// autoselection to happen more than once per cell so that
// two consecutive clicks will allow the user to pinpoint the
// cursor to a specific position
var isSelected = $(this).attr('data-selected') == 'true';
if (!isSelected) {
$('input[data-selected]').removeAttr('data-selected');
$(this).attr('data-selected', 'true');
$(this).select();
}
});
//prevent non-numeric values from being added
$('.tdTextInput input').keydown(function (e)
{
CommonTools.IsNumeric(e);
});
CommonTools.IsNumeric
refers to the following: -(probably not relevant though since the keydown function is not the issue. Only adding it in the question for pleteness)
isNumeric = function (e)
{
if(!(e.which>=48 && e.which<=57)) //numeric values only
e.preventDefault();
}
Why is this only working in FF and IE and not in Chrome?
UPDATE: I've created a fiddle here: http://jsfiddle/dDc73/, however it doesn't even work in FF or IE in the fiddle either.
Some more info: When I click on the cell it selects all the text until I release the mouse click.
Share Improve this question edited Apr 3, 2013 at 13:43 hofnarwillie asked Apr 3, 2013 at 13:25 hofnarwilliehofnarwillie 3,66010 gold badges52 silver badges76 bronze badges2 Answers
Reset to default 6Refrence: Selecting text on focus using jQuery not working in Safari and Chrome
$(".tdTextInput input").mouseup(function(e){
e.preventDefault();
});
this also might be of help:
Select all text on focus using jQuery
$(".tdTextInput input").live('mouseup', function () {
$(this).select();
});
Let the "First name" input field automatically get focus when the page loads:
<form action="demo_form.asp">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>