jquery 如何使用JavaScript onmouseout将文本保存到div

liwlm1x9  于 2023-01-04  发布在  jQuery
关注(0)|答案(1)|浏览(100)

我有一个div,当我点击保存按钮时,我可以将文本保存到其中,但我希望文本在onmouseout事件中自动保存。例如:
我有一个div和两个按钮(保存和取消)。用户目前可以将鼠标悬停在div中的当前文本数据上,单击文本,然后编辑所述文本。保存此文本的唯一方法是单击保存按钮。是否有一种方法可以使用onmouseout保存文本,以便用户只需单击并编辑文本,然后单击并保存它?
下面的代码是我目前所拥有的,但它似乎并不工作。我不担心保存代码,因为我已经在其他地方有了。我只是想让它在我可以键入文本,让onBlur触发,并将HTML还原为单击文本之前的样子。现在我可以点击它,div内的文本框会出现,但是当我点击div外的时候,文本框仍然可见。

function setClickable() {
        $('#editInPlace').click(function() {
            var textarea = '<div onBlur="saveChanges()><textarea rows="3" cols="30">' + $(this).html() + '</textarea>';
            //var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
            var revert = $(this).html();
            $(this).after(textarea).remove();           

        })
.mouseover(function() {
    $(this).addClass("editable");
})
.mouseout(function() {
    $(this).removeClass("editable");
    saveChanges(this, revert);
});
    };

    function saveChanges(obj, cancel) {
        if (!cancel) {
            var t = $(obj).parent().siblings(0).val();
            
            //need some post code for saves

        }
        else {
            var t = cancel;
        }
        if (t == '') t = '(click to add text)';
        $(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
        setClickable();
    }
dxxyhpgq

dxxyhpgq1#

我认为您需要onblur事件,正如您提到的在div外部单击(而不仅仅是将鼠标移出):

<div contenteditable="true" onblur="saveContent()">
    Edit me and then click or tab out to save.
</div>

保存按钮的onclick事件中包含的内容都将保存到div的onblur事件中,这只会在元素失去焦点时保存内容--尽管这样做让取消按钮失去了意义。

相关问题