0

所以我有一个页面，其中字段是 s，当用户单击它们时，它们会更改为输入以允许更改其值。当用户在输入之外单击时，它会变回一个跨度。这是我正在使用的代码：

$(function () {
$('.txtToInput').live('click', function () {
    var input = $('<input />', {'type': 'text','class': 'txtToInput', 'name': 'aname', 'value': $(this).html()});
    $(this).parent().append(input);
    $(this).remove();
    input.focus();
});

$('.txtToInput').live('blur', function () {
    var span = $('<span />', {'class': 'txtToInput'});
    $(this).parent().append($(span).html($(this).val()));
    $(this).remove();
});
});

这工作得很好，但有一个问题：当用户突出显示输入中的文本时，内容会跳到输入之外，并且元素无法更改回跨度。任何想法是什么导致了这种情况以及如何解决？

这是一个演示这种行为的小提琴。

4

3 回答 3

4

操作从 DOM 中出现和消失的元素是很繁琐的，并且可能需要事件委托（即.live按原样使用或首选.on方法）。

考虑将这两个元素都放在 DOM 中，并仅使用.show()and.hide()来确定哪一个是可见的。

于 2013-05-16T09:12:34.187 回答
1

问题已解决：

textbox = false;
$(function () {
    $('.txtToInput').live('click', function () {
        if (!textbox) {
            var input = $('<input />', {
                'type': 'text',
                'class': 'txtToInput',
                'name': 'aname',
                'value': $(this).html()
            });
            $(this).parent().append(input);
            $(this).remove();
            input.focus();
            textbox = true;
        }
    });

    $('.txtToInput').live('blur', function () {
        if (textbox) {
            var span = $('<span />', {
                'class': 'txtToInput'
            });
            $(this).parent().append($(span).html($(this).val()));
            $(this).remove();
            textbox = false;
        }
    });
});

小提琴：http: //jsfiddle.net/QNR5z/1/

您只需要检查对象是“输入”版本还是“跨度”版本，因为问题是，虽然对象是“输入”版本，但如果用户单击该对象，代码会创建一个新的文本框

于 2013-05-16T09:23:58.193 回答
1

一个不重来的好方法是使用x-editable. 看这里

于 2013-05-16T09:25:09.077 回答