Заполнитель в проблеме события contenteditable-focus

Question

Заполнитель в проблеме события contenteditable-focus

Я пытался спросить об этом раньше, без каких-либо успехов в объяснении/доказательстве рабочего примера, где происходит ошибка. Так вот еще одна попытка:

Я пытаюсь воспроизвести эффект заполнителя на contenteditable DIV. Основная концепция проста:

<div contenteditable><em>Edit me</em></div>



<script>

$('div').focus(function() {

    $(this).empty();

});

</script>

это может sometomes работать, но если заполнитель содержит HTML, или если там производится какая-то другая обработка, редактируемый DIV текстовый курсор удаляется, и пользователь должен повторно щелкнуть редактируемый DIV чтобы начать печатать (даже если он все еще находится в фокусе):

пример:http://jsfiddle.net/hHLXr/6/

Я не могу использовать триггер фокуса в обработчике, так как он создаст цикл событий. Поэтому мне нужен способ переустановить курсор курсора в редактируемом DIV или каким-то другим способом перефокусировать.

744 10

jQuery javascript focus contenteditable caret

10 ответов:

Comments

Ничего не найдено.

Tim Down · Accepted Answer · 2013-11-13 13:39:24

возможно, потребуется вручную обновить выбор. В IE событие focus слишком поздно, поэтому я бы предложил использовать событие. Вот некоторый код, который выполняет эту работу во всех основных браузерах, включая IE

демо:http://jsfiddle.net/hHLXr/12/

код:
$('div').on('activate', function() {
    $(this).empty();
    var range, sel;
    if ( (sel = document.selection) && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(this);
        range.select();
    }
});

$('div').focus(function() {
    if (this.hasChildNodes() && document.createRange && window.getSelection) {
        $(this).empty();
        var range = document.createRange();
        range.selectNodeContents(this);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
});

moje · Accepted Answer · 2016-10-12 13:45:52

вот CSS только решение, дополняющее некоторые другие ответы: -
<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
    [contentEditable=true]:empty:not(:focus)::before{
        content:attr(data-ph)
    }
</style>
EDIT: вот мой фрагмент кода на codepen ->http://codepen.io/mrmoje/pen/lkLez

EDIT2: имейте в виду, этот метод не работает 100% для многострочных приложений из-за остаточного <br> элементы, присутствующие в div после выполнения select-all-cut или select-all-delete по всем линиям. Кредиты: - @vsync
Backspace, кажется, работает нормально (по крайней мере, на webkit/blink)

Craig Stuntz · Accepted Answer · 2013-01-26 00:09:00

Я опубликовал плагин для этого.

Он использует комбинацию CSS3 и JavaScript, чтобы показать заполнитель без добавления к содержимому div:

HTML:
<div contenteditable='true' data-placeholder='Enter some text'></div>
CSS:
div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
    content: attr(data-placeholder);
    float: left;
    margin-left: 5px;
    color: gray;
}
JS:
(function ($) {
    $('div[data-placeholder]').on('keydown keypress input', function() {
        if (this.textContent) {
            this.dataset.divPlaceholderContent = 'true';
        }
        else {
            delete(this.dataset.divPlaceholderContent);
        }
    });
})(jQuery);
и это все.

amwinter · Accepted Answer · 2013-01-10 19:01:29

просто используйте псевдоклассы css.
span.spanclass:empty:before {content:"placeholder";}

ramo · Accepted Answer · 2013-12-08 14:38:44

Я нашел, что лучший способ сделать это-использовать placeholder атрибут, как обычно, и добавить несколько строк CSS.

HTML
<div contenteditable placeholder="I am a placeholder"></div>
CSS
[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: #bababa;
}
Примечание: CSS :empty селектор работает только в том случае, если между открывающим и закрывающим тегом буквально ничего нет. Это включает в себя новые строки, вкладок, пустое пространство и т. д.

Codepen

wp student · Accepted Answer · 2015-12-12 18:42:28

все, что вам нужно, это небольшое решение
[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}
демо:http://codepen.io/flesler/pen/AEIFc

surfs up · Accepted Answer · 2013-08-24 09:41:24

вот мой путь:

Он использует комбинацию jQuery и CSS3. работает точно так же, как атрибут заполнителя html5!.

прячется сразу же при вводе первой буквы

показывает себя снова, когда вы удаляете то, что вы вводите в него

HTML:
<div class="placeholder" contenteditable="true"></div>
CSS3:
.placeholder:after {
    content: "Your placeholder"; /* this is where you assign the place holder */
    position: absolute;
    top: 10px;
    color: #a9a9a9;
}
jQuery:
$('.placeholder').on('input', function(){
    if ($(this).text().length > 0) {
        $(this).removeClass('placeholder');
    } else {
        $(this).addClass('placeholder');
    }
});
демо: http://jsfiddle.net/Tomer123/D78X7/

Phitha · Accepted Answer · 2015-04-16 19:18:36

вот исправление, которое я использовал.
<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
    var target = $(this);
    window.setTimeout(function() { target.empty(); }, 10);
});
</script>
Я разработал плагин jQuery для этого. Взгляните https://github.com/phitha/editableDiv

thecodeparadox · Accepted Answer · 2012-02-01 12:04:41

var curText = 'Edit me';
$('div').focusin(function() {
    if ($(this).text().toLowerCase() == curText.toLowerCase() || !$(this).text().length) {
        $(this).empty();
    }
}).focusout(function() {
    if ($(this).text().toLowerCase() == curText.toLowerCase() || !$(this).text().length) {
        $(this).html('<em>' + curText + '</em>');
    }
});

Ganesh S · Accepted Answer · 2017-07-10 14:07:03

Это не точное решение вашей проблемы ..

в настройках summernote set

airMode: true

заполнитель работает таким образом.