Как сохранить текст в div с помощью JavaScript onmouseout - PullRequest
0 голосов
/ 08 марта 2010

Доброе утро всем. У меня есть 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();
    }   

1 Ответ

0 голосов
/ 08 марта 2010

Я думаю, вы хотите событие onblur, как вы упомянули, щелкая за пределами div (а не просто перемещая мышь):

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

Все, что у вас есть для события onclick вашей кнопки Сохранить, будет добавлено в событие onblur элемента div. Это просто сохранит содержимое, когда элемент потеряет фокус, хотя и лишит смысла наличие кнопки отмены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...