在可信的元素上聚焦/模糊事件

Question

我尝试使用span属性在contenteditable=true上收听焦点/模糊事件。

所以这就是我尝试过的（jQuery）：

$('.editable').on('focus',function(){
    var that = $(this),
        defaultTxt = that.data('default');
    that.html('');
});
$('.editable').on('blur',function(){
    var that = $(this),
        defaultTxt = that.data('default');
    if(that.html() === ''){
        that.html(defaultTxt);
    }
});

但他似乎没有工作，因为 span不会处理焦点/模糊。我怎么能实现这一点（需要IE8支持）？

Answer 1

有两种方法可以达到这种效果。

方法1：focusin和focusout（几乎是跨浏览器）

$('.editable').on('focusin', function() {
    // your code here
});

$('.editable').on('focusout', function() {
    // your code here
});

focusin和focusout类似于focus和blur事件，但与后者不同，它们会在几乎（？）每个元素上被触发，并且还会冒泡。 focusin和focusout是DOM级别3规范的一部分，由于已知的错误[1]

，Firefox不支持它们

方法2：click和focus（hacky，但完全跨浏览器）

这仅适用于您的跨度周围有其他focus个元素。你所做的基本上是在任何其他元素上使用focus事件作为模糊处理程序。

$('.editable').on('click', function() {
    // your code here
});

$('*').on('focus', function() {
    // handle blur here
    // your code here
});

我不建议在大型网络应用程序中使用此方法，因为浏览器性能会受到影响。

Answer 2

我为你创建了一个演示：

$('.editable').bind('click', function(){
  $(this).attr('contentEditable',true);
});

$('.editable').bind('focus', function() {
  var that = $(this);
  //defaultTxt = that.data('default');
  that.html('');    
});

$('.editable').bind('blur', function() {
  var that = $(this);
  var defaultTxt = that.data('default');
  if(that.html() === ''){
    that.html(defaultTxt);
  }    
});

.editable{
    padding: 5px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span class="editable" data-default="default">Some text</span>

我已经更改了你的代码，看看它。此外，如果您没有输入任何内容，它会在失去焦点时保留旧值。