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.

• javascript
• jquery
• html
• focus

2 Answers 2

Refrence: 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>