0

I wrote a script that allows users to click onto a table cell and edit the value with jQuery. Basically, when they click the cell, the HTML in the cell gets replaced with an input box and any text that was previously in the cell gets added to the input. My issue is that whenever they click on the cell, the input doesn't get focused and they have to click a second time to put the cursor in. I have tried a bunch of selectors with .focus() to try and put the cursor in but I'm not having any luck.

Here is the function that gets called when the user clicks on a cell:

function edit_cell()
        {   
            if($(this).hasClass('edit_box'))
                if(!$(this).hasClass('editable')){
                    $(this).addClass('editable');
                    string = $(this).text();
                    $(this).html("<input type='text' value='" + string + "'/>");
                }
        } 

Also here is a second function that adds a new <tbody> and a new table row, with the first cell containing an active input field.

function add_ex(){
     string = "<tbody><tr><td><input type='text'></td></tr></tbody>";       
     $(this).parents('tbody').before(string);
}

2 Answers 2

2

This works - just get an explicit reference to the new input element and .focus() on it:

function edit_cell() {
    if ($(this).hasClass('edit_box')) {
        if (!$(this).hasClass('editable')) {
            $(this).addClass('editable');
            var input = $('<input type="text">').val($(this).text());
            $(this).html(input);
            $(input).focus();
        }
    }
}

Note that this also avoids the potentially error prone string concatenation when you create the <input> element.

Working example at http://jsfiddle.net/alnitak/SpkZG/


For your second snippet, create the elements straight away, put them into the DOM, then focus on the single element you need:

var $tbody = $("<tbody><tr><td><input type='text'></td></tr></tbody>");
$(this).parents('tbody').before($tbody);
$tbody.find(':input').focus();
6
  • This works beautifully as well, and I like how clean the code is. Thanks!
    – Sandoichi
    Nov 19, 2011 at 1:45
  • @Sandoichi thanks. The .val() bit is important - consider what your code would do if you had a " in the original text.
    – Alnitak
    Nov 19, 2011 at 1:50
  • I have another function that adds a new tbody and table row when a button gets clicked. The first cell in this new row has an input field that also needs to be focused when created. I updated my question with the code from the 2nd function, would you show me how to implement your fix into that? I'm not sure how to add it in.
    – Sandoichi
    Nov 19, 2011 at 1:58
  • I stripped the string down to the basic tags and the input field that needs to be focused.
    – Sandoichi
    Nov 19, 2011 at 2:05
  • the 2nd snippet worked perfectly. I never thought of putting them into the DOM like that, I guess I need to study up on jQuery basics a bit more. Thanks again!
    – Sandoichi
    Nov 19, 2011 at 2:26
-1

Try this:

$(this).html("<input class='focusMe' type='text' value='" + string + "'/>");
$('.focusMe').eq($('.focusMe').length-1).focus()
6
  • Awesome! That works perfectly. So basically you have to focus a specific index in the field, not the field itself? Good to know.
    – Sandoichi
    Nov 19, 2011 at 1:32
  • no, it works fine just so long as you focus on the actual <input> element and not its wrapping element. See my answer.
    – Alnitak
    Nov 19, 2011 at 1:41
  • FWIW, I think this will actually fail if you click on the middle of a list of elements - the given selector only finds the last .focusMe element in the page, not the most recent one added. It's also horribly inefficient.
    – Alnitak
    Nov 19, 2011 at 1:46
  • "horribly inefficient", like what, 5ms? Nov 19, 2011 at 1:52
  • like retrieving every .focusMe element into an array just to find the one you want, and then doing it again just to find the same array's length?! This would matter a lot if you had hundreds of these on the page.
    – Alnitak
    Nov 19, 2011 at 1:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.