Question

我编写了一个替换原始html占位符的函数，然后我可以设置占位符文本的样式。

它与input和textarea元素一起工作正常，
如果目标是问题 contentEditable div，点击一次后不能聚焦，不能打字，需要点击第二次才能聚焦...
如何只点击一次并关注

＆＃13;

var placeholder = function(el) {
  el.on('focusin', function() {
    var val = $(this).text();
    
    var placeholder = $(this).attr('data-placeholder');
    
    if (val == placeholder) {
      if ($(this).attr('data-empty') != 'false') {
        
        $(this).text('');
      }
    }
  });
  el.on('focusout', function() {
    var val = $(this).text();
    var placeholder = $(this).attr('data-placeholder');

    if (val == '') {
      $(this).text(placeholder);

      $(this).attr('data-empty', 'true');
    } else {
      $(this).attr('data-empty', 'false');
    }
  });
};

placeholder($('.textarea'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="textarea" contentEditable="true" data-placeholder="placeholder">placeholder</div>

＆＃13;

Answer 1

您可以在:empty元素上使用 CSS :before和contenteditable。
使用content: attr(data-placeholder)，你可以标记任何你想要的文字。

＆＃13;

[contenteditable] {padding:12px; background:#eee; }

[data-placeholder]:empty:before{
  content: attr(data-placeholder);
  color: #888;
  font-style: italic;
}

＆＃13;

<div contenteditable data-placeholder="I'm a placeholder"></div>

＆＃13;

Answer 2

通过在click和focusout事件后更改属性contentEditable来解决此问题，如下所示

el.on('click', function() {
  $(this).attr('contentEditable', 'true');
  $(this).focus();
});

el.on('focusout', function() {
  $(this).attr('contentEditable', 'false');
});

https://stackoverflow.com/a/15993398/5593189

包含contentEditable元素

2 个答案: