Question

我写了一个脚本，允许用户点击表格单元格并使用jQuery编辑值。基本上，当他们单击单元格时，单元格中的HTML将被替换为输入框，并且先前在单元格中的任何文本都会添加到输入中。我的问题是，无论何时他们点击单元格，输入都不会聚焦，他们必须再次单击才能将光标放入。我已经尝试了一堆带有.focus（）的选择器来尝试放置光标但是我没有运气。

以下是用户点击单元格时调用的函数：

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 + "'/>");
                }
        }

此处还有第二个函数，它添加了一个新的<tbody>和一个新的表行，第一个单元格包含一个活动的输入字段。

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

Answer 1

这样做 - 只需获得对新输入元素的明确引用，并在其上.focus()：

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();
        }
    }
}

请注意，这也可以避免在创建<input>元素时容易出错的字符串连接。

http://jsfiddle.net/alnitak/SpkZG/

的工作示例

对于你的第二个片段，立即创建元素，将它们放入DOM中，然后专注于你需要的单个元素：

var $tbody = $("<tbody><tr><td><input type='text'></td></tr></tbody>");
$(this).parents('tbody').before($tbody);
$tbody.find(':input').focus();

Answer 2

试试这个：

$(this).html("<input class='focusMe' type='text' value='" + string + "'/>");
$('.focusMe').eq($('.focusMe').length-1).focus()

使用jQuery将光标放入动态添加的输入字段中

2 个答案: