Question

所以我有一个页面，其中字段为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();
});
});

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

以下a fiddle证明了这种行为。

Answer 1

操纵从DOM中出现和消失的元素非常繁琐，并且可能需要事件委派（即使用.live或者首选的.on方法）。

考虑将两个元素放在DOM中，然后使用.show()和.hide()来确定哪个元素可见。

Answer 2

问题已解决：

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/

您只需要检查对象是否在＆＃34;输入＆＃34;版本或在＆＃34; span＆＃34;版本，因为问题是，虽然对象在＆＃34;输入＆＃34;版本，但如果用户点击该对象，则代码会创建一个新文本框

Answer 3

不再重复使用的一个非常好的方法是使用x-editable。见here

使用jQuery将<span>转换为<input />并返回</span>

3 个答案: