从span标签转换为输入框，反之亦然

Convert to input box from span tag and vice versa

本文关键字：反之亦然 输入 span 标签 转换      更新时间：2023-09-26

我正试图弄清楚如何将span标签转换为输入框，反之亦然在我正在构建的web应用程序上。我可以将span标签转换为一个输入框，但由于某种原因，如果您第二次单击span标签，它不会将其转换为一个输入框。我只能假设这是因为jQuery中处理程序的绑定和解绑定，但我无法找出处理该功能的最佳方法。什么好主意吗?

$('[content-editable]').click(function(){
    var edit_box = $(this);
    $(edit_box).html('<input type="text" content-editing value="' + $(edit_box).html() + '">');
    $(edit_box).find('input').select();
    setTimeout(function(){
        $('body').on('click', function(){
            $(edit_box).html($(edit_box).find('input').val());
        });
    }, 500);
});

p。添加超时是为了防止输入框在点击后直接变成span标签。

我的JS提琴:http://jsfiddle.net/AaxT9 -由于某些原因，在JS提琴它不转换回跨度标签后，点击主体，但它在我的web应用程序。

在你的尝试中有多个问题:

  1. 您将处理程序放在错误的位置。把它放在另一个点击处理程序中，将多次分配处理程序，并逐步调用处理程序。

  2. 您可能想要点击其他地方将其转换回span。所以选择document点击绑定

  3. 另外，保持你的代码在$(document).ready()函数，以确保DOM已加载

这样做:

$(document).ready(function() {
    var edit_box = $('[content-editable]');
    $(document).on("click",function() {
        console.log($(event.target));
        if($(event.target).is("[content-editable]")) {
            $(edit_box).html('<input type="text" value="' + $(edit_box).html() + '">');
            $(edit_box).find('input').select();
        }
        else if(!$(event.target).is("input")){
            $(edit_box).html($(edit_box).find('input').val());   
        }
    });
});

我有document点击为我的一部分，但如果你想使用body点击处理程序，那么你可以使用它，但这将转换input回span只在body点击。

不要设置超时时间，而是将代码移回onblur函数中添加的span。

$('[content-editable]').click(function () {
    var edit_box = $(this);
    $(edit_box).html('<input type="text" value="' + $(edit_box).html() + '">');
    $(edit_box).find('input').select().on('blur', function () {
        $(edit_box).html($(edit_box).find('input').val());
    });
});

编辑

$('[content-editable]').click(function () {
    var edit_box = $(this);
    $(edit_box).html('<input type="text" value="' + $(edit_box).html() + '">');
    $(edit_box).find('input').select().one('blur', function () {
        $(edit_box).html($(edit_box).find('input').val());
    });
});

小提琴

相关文章：