替换后设置焦点答案

【问题标题】：set focus after replaceWith替换后设置焦点
【发布时间】：2014-02-07 14:02:48
【问题描述】：

我正在开发发票系统，我已经来到了订单项的部分。

为此，我有一个表格，它最终会有一个按钮，可以将另一个订单项动态添加到 DOM。

在那之前，我一直在尝试解决单个订单项的问题。就我而言，它是注释部分。

对于注释的输入，我有一个带有一些文本的 P 标记，然后单击该元素将其替换为文本区域。

<h2>line items</h2><hr>
    <table id='lineitems'>
        <tr>
            <th>Order #</th>
            <th>Style #</th>
            <th>Item Name/Description</th>
            <th>Quantity</th>
            <th>Cost</th>
        </tr>
        <tr>
            <td><input type='text' name='ladingnum' /></td>
            <td><input type='text' name='invoicenum' /></td>
            <td><input type='text' name='invoicenum' style='width:300px;'/></td>
            <td><input type='text' name='invoicenum' /></td>
            <td><input type='text' name='invoicenum' /></td>    
        </tr><tr><td colspan=4>
            <div id='thenotes'>
                <input type='hidden' class='comments' name='notes'/>
                <textarea class='comments'></textarea>
                <p class='edit'>[ click here to add notes ]</p>
            </div>
        </td></tr>

    </table>

这是我正在使用的 jQuery。

$(document).on('click', '.edit', function() {
    var odata = $(this).closest("input:hidden").val();
    if( odata == undefined ) odata = '';
    $(this).closest("textarea.comments").val(odata).focus();
});

$(document).on('focusout', '.liveedit', function () {
        var idata = $(this).val();
        if( idata == '' ) idata = "[ click here to add notes ]";
        $(this).prevAll("input:hidden").val(idata);
        $(this).replaceWith("<p class='edit'>"+idata+"</p>");
});

使用它，我得到了这个效果。

页面加载... P 标签的默认内容为单击此处添加注释。单击它会变成一个文本区域，其中包含隐藏字段中的任何内容。它也应该专注于这个新创建的文本区域......它没有专注！

最重要的是。我似乎无法让 textarea 的值进入隐藏的输入字段...我做错了什么？

【问题讨论】：

标签： jquery focus invoice

【解决方案1】：

选择器.closest('input:hidden') 只会选择它最近的父级，而不是兄弟级。您必须使用.siblings('input:hidden') 或.closest('div').find('input:hidden') 来选择输入和文本区域。

类似这样的：

演示here

$(function () {
    $(document).on('click', '.edit', function () {
        var odata = $(this).closest("div").find("input:hidden").val();
        if (odata == undefined) odata = '';
        $(this).closest("div").find("textarea.comments").val(odata).focus();
    });

    $(document).on('focusout', '.liveedit', function () {
        var idata = $(this).val();
        if (idata == '') idata = "[ click here to add notes ]";
        $(this).prevAll("input:hidden").val(idata);
        $(this).replaceWith("<p class='edit'>" + idata + "</p>");
    });
});

【讨论】：

【解决方案2】：

使用siblings 而不是closest。试试这个：

 $(document).on('click', '.edit', function() {
var odata = $(this).siblings("input[type='hidden']").val();
if( odata == undefined ) odata = '';
$(this).siblings("textarea.comments").val(odata).focus();
});

【讨论】：

【解决方案3】：

隐藏的<input> 和<p> 标记是兄弟，所以你应该使用siblings() 选择器。 closest() 用于遍历元素的祖先，直到找到匹配选择器。您也没有在您的代码上创建任何<textarea>，但我想这就是'.liveedit' 的用途：

$(document).on('click', '.edit', function () {
    var odata = $(this).siblings("input:hidden").val();
    if (odata == undefined) odata = '';
    var textarea = $('<textarea class="liveedit">' + odata + '</textarea>');
    $(this).replaceWith(textarea);
    textarea.focus();
});

$(document).on('focusout', '.liveedit', function () {
    var idata = $(this).val();
    if (idata == '') idata = "[ click here to add notes ]";
    $(this).siblings("input:hidden").val(idata);
    $(this).replaceWith("<p class='edit'>" + idata + "</p>");
});

查看这个 jsfiddle：http://jsfiddle.net/yKym7/1/

【讨论】：