Заполнитель для контент-контента div

Ответ 1

При поиске той же проблемы я разработал простое смешанное решение css-JavaScript, которым я хотел бы поделиться:

CSS:

[placeholder]:empty::before {
    content: attr(placeholder);
    color: #555; 
}

[placeholder]:empty:focus::before {
    content: "";
}

JavaScript:

jQuery(function($){
    $("[contenteditable]").focusout(function(){
        var element = $(this);        
        if (!element.text().trim().length) {
            element.empty();
        }
    });
});

Обновленная скрипка

Ответ 2

от Placeholder в contenteditable - в центре внимания события

[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-ph);
  color:grey;
  font-style:italic;
}

Ответ 3

некоторые исправления:

1) $element.text().trim().length - он решил проблемы с <div><br/></div> и  

2) data-placeholder attr вместо placeholder - это истинный способ

3) общий селектор $("[contenteditable]") - это истинный способ

4) display: inline-block; - исправление для Chrome и Firefox

JavaScript:

jQuery(function($){
    $("[contenteditable]").blur(function(){
        var $element = $(this);
        if ($element.html().length && !$element.text().trim().length) {
            $element.empty();
        }
    });
});

HTML:

<div data-placeholder="Type something..." contenteditable="true"></div>

CSS

[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: grey;
    display: inline-block;
}

Ответ 4

Я понимаю, что вы имеете в виду. В вашей скрипке я набрал несколько символов и удалил ее с помощью "ctrl-a" и "delete", и заполнитель снова появился.

Однако кажется, что, когда вы нажмете 'enter' в div contenteditabele, он создает дочерний div, содержащий разрыв строки <div><br></div>, создавая проблему с пустым псевдоклассом, который предназначен только для элементов без дочерние элементы. **

Проверьте это в инструментах разработчика Chrome или на том, что вы используете.

От developer.mozilla.org

Пустой псевдокласс представляет собой любой элемент, у которого вообще нет детей. Рассматриваются только узлы элементов и текст (включая пробелы). Комментарии или инструкции по обработке не влияют на то, считается ли элемент пустым или нет.

Ctrl-a удалит текст, но оставляет дочерний div. Можете исправить это, добавив несколько javascript.

Ответ 5

Похоже, я повторяюсь, но почему бы не проверить мутации элемента contenteditable? Попытка связать все с событием, которое меняет контент, - это боль в прикладе. Что делать, если вам нужно добавить кнопку (например, вставить) или динамически изменить контент (javascript). Мой подход будет использовать MutationObservers. Демо fiddle

HTML:

<div class="test" id="test" placeholder="Type something..." contenteditable="true"></div>

CSS

.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}

JavaScript:

var target = document.querySelector('#test');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if (target.textContent == '') {
          target.innerHTML = '';
      }
  });    
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

Ответ 6

Обновив ответ Christian Brink, вы можете/должны проверить дополнительные события. Вы можете сделать это, просто сделав:

// More descriptive name
var $input = $(".placeholder");
function clearPlaceHolder() {
  if ($input.text().length == 0) {
    $input.empty();
    }
  }

// On each click
$input.keyup(clearPlaceHolder);

// Probably not needed, but just in case
$input.click(clearPlaceHolder);

// Copy/paste/cut events http://stackoverflow.com/q/17796731
$input.bind('input', (clearPlaceHolder));

// Other strange events (javascript modification of value?)
$input.change(clearPlaceHolder);

Наконец, обновленный JSFiddle

Ответ 7

Как сказал swifft, вы можете исправить это с помощью нескольких простых JS. Использование jQuery:

var $input = $(".test");
$input.keyup(function () {
    if ($input.text().length == 0) {
        $input.empty();
    }
});

При каждом нажатии клавиши он проверяет наличие любого входного текста. Если нет, он удаляет любые дочерние элементы, которые могли быть оставлены посторонним взаимодействием с элементом - например, описывается <div> swifft.

Ответ 8

У меня есть эта функция, и я всегда использую ее, чтобы предотвратить такие вещи.

Я использую свою функцию следующим образом:

var notEmpty = {}

    notEmpty.selector = ".no-empty-plz"
    notEmpty.event = "focusout"
    notEmpty.nonEmpty = "---"


    neverEmpty(notEmpty)

И я просто добавляю no-empty-plz к элементам I, которые не хотят быть пустыми.

/**
     * Used to prevent a element have a empty content, made to be used 
when we want to edit the content directly with the contenteditable=true 
because when a element is completely empty, it disappears U_U
     * 
     * @param selector
     * @param event
     * @param nonEmpty:
     *        String to be put instead empty
     */
function neverEmpty(params) {

    var element = $(params.selector)



    $(document).on(params.event, params.selector, function() {

        var text = $(this).html()
        text = hardTrim(text)

        if ($.trim(text)  == "") {
            $(this).html(params.nonEmpty)
        }
    });
}

params на самом деле json, поэтому selector = params.selector, как вы можете видеть

И hardTrim также является еще одним созданным мной fucntion, подобным обрезке, но включает & nbsp и <br/>, и т.д.

function hardTrim(text) {

    if (!exists(text)) {
        return ""
    }
    text = text.replace(/^\&nbsp\;|<br?\>*/gi, "").replace(/\&nbsp\;|<br?\>$/gi, "").trim();

    return text
}

Ответ 9

Я создал живую демонстрацию: "Заполнитель для div-объектов, редактируемых с помощью контента", с помощью HTML и CSS.
Кроме того, Codepen: https://codepen.io/fritx/pen/NZpbqW
Ссылка: https://github.com/fritx/vue-at/issues/39#issuecomment-504412421

.editor {
  border: solid 1px gray;
  width: 300px;
  height: 100px;
  padding: 6px;
  overflow: scroll;
}
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  position: absolute;
  color: gray;
  background-color: transparent;
}

<textarea class="editor" placeholder="Textarea placeholder..."></textarea>
<br>
<br>
<div class="editor" contenteditable placeholder="Div placeholder..." oninput="if(this.innerHTML.trim()==='<br>')this.innerHTML=''" ></div>

Ответ 10

<div id="write_comment" contenteditable="true"></div>

var placeholderCommentText = 'Comment...',
    placeholderComment = $('#write_comment').attr('placeholder', placeholderCommentText);

$('#write_comment').text(placeholderCommentText);

$('[contenteditable]').bind({
    focus: function(){
        if ($('#write_comment').text().length == 0 || $('#write_comment').text() == $('#write_comment').attr('placeholder')) {
            $(this).empty();
        }
        $(this).keyup(function(){
            if ($('#write_comment').text() == $('#write_comment').attr('placeholder')){
                $('#write_comment').attr('placeholder','');
            } else if ($('#write_comment').text().length == 0 ) {
                $('#write_comment').attr('placeholder', placeholderCommentText);
            }
        });
    },
    focusout: function(){
        if ($('#write_comment').text().length == 0) { 
            $(this).text($(this).attr('placeholder'));
        }
    }
});