在元素外部单击时重置输入字段

Reset input-field when click outside the element

本文关键字：输入 字段 元素 外部 单击      更新时间：2023-09-26

我有下面的代码来启用内联编辑

$('.edit_td').click(function() {
    resetEditedCells(); 
    $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">');
});
function resetEditedCells() {
        $('.edit_td.active').html(function() {
        return $(this).find('input').val();
    });
}

当从td切换到td时可以正常工作。但是当我在表外的任何地方单击时，我希望输入字段转换回常规tds。

我试过了:

$(document).on('blur', function(e) {
    if($('.edit_td').hasClass('active')) {
        $('.active').remove();
    } else {
        alert("false");
    }
});

.blur()没有被触发。有人知道吗?

尝试像这样替换您的代码

$(document).on('click', function(e) {
    var edit_td = $(e.target).closest('.edit_td');
    if ( edit_td.length > 0 ) {
        resetEditedCells(); 
        edit_td.addClass('active')
               .html('<input type="text" value="' + edit_td.html() + '">');
    }else{
        $('.edit_td.active').removeClass('active').empty();
    }
});

这使用closest()来确定点击是来自TD内部还是外部。

你需要使用click event来代替blur:

$(document).click(function() {
 if($('.edit_td').hasClass('active')) {
     $('.active').remove();
 } else {
     alert("false");
}});

也修改td click event为stopPropagation:

$('.edit_td').click(function(e) {
 e.stopPropagation();
 resetEditedCells(); 
 $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">');
});

试试这个js代码，其中edit_td类应用到每个td和活动类上，并且在活动td上绑定了blur函数，并在它们上应用了"edit_td"answers"active"类。

$('.edit_td.active').on('blur', function(e) {
       $('.active').remove();
    });
相关文章：