contenteditable中的占位符 - 焦点事件问题 [英] Placeholder in contenteditable - focus event issue

问题描述

我一直试图问这个，没有任何解释/证明错误发生的例子。所以这里是另一个尝试：

我试图在contenteditable DIV上复制一个占位符效果。核心概念很简单：

 < div contenteditable>< em>编辑我< / em>< / div> 
 
< script> 
 $（'div'）。focus（function（）{
 $（this）.empty（）; 
}）; 
< / script> 
  

这可以做一些工作，但是如果占位符包含HTML，或者有其他的处理，可编辑的DIV的文本插入符将被删除，用户必须重新点击可编辑的DIV才能开始输入（即使焦点仍然存在）： ： http://jsfiddle.net/hHLXr/6/

我不能在处理程序中使用焦点触发器，因为它会创建一个事件循环。所以我需要一种方法来在可编辑的DIV中重新设置光标游标，或者以其他方式重新聚焦。

解决方案

您可能需要手动更新选择。在IE中，焦点事件为时已晚，所以我建议使用 activate 事件。这里有一些代码可以在所有主要的浏览器中完成这个工作，包括IE< = 8（这是一个只有CSS的选择不会）：

现场演示： http://jsfiddle.net/hHLXr/12/

代码：< /'>
$ b $

  $（'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（）; 
} 
}）;如果（this.hasChildNodes（）&& document.createRange&&& window.getSelection）{$ b（
 $ b $（'div'）。 $ b $（this）.empty（）; 
 var range = document.createRange（）; 
 range.selectNodeContents（this）; 
 var sel = window.getSelection（）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
} 
}）; 
  

I have been trying to ask this before, without any luck of explaining/proving a working example where the bug happens. So here is another try:

I’m trying to replicate a placeholder effect on a contenteditable DIV. The core concept is simple:

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

<script>
$('div').focus(function() {
    $(this).empty();
});
</script>

This can sometomes work, but if the placeholder contains HTML, or if there some other processing being made, the editable DIV’s text caret is being removed, and the user must re-click the editable DIV to be able to start typing (even if it’s still in focus):

Example: http://jsfiddle.net/hHLXr/6/

I can’t use a focus trigger in the handler, since it will create an event loop. So I need a way to re-set the caret cursor in the editable DIV, or in some other way re-focus.

解决方案

You may need to manually update the selection. In IE, the focus event is too late, so I would suggest using the activate event instead. Here's some code that does the job in all major browsers, including IE <= 8 (which a CSS-only alternative will not):

Live demo: http://jsfiddle.net/hHLXr/12/

Code:

$('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);
    }
});

这篇关于contenteditable中的占位符 - 焦点事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！