将事件聚焦/模糊在可编辑内容的元素上

Focus / blur events on contenteditable elements

本文关键字：元素 编辑 聚焦 事件 模糊      更新时间：2023-09-26

我正在尝试侦听具有contenteditable=true属性的span上的焦点/模糊事件

下面是我尝试的（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支持）？

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

方法1:focusin和focusout

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

focusin和focusout类似于focus和blur事件，但与后者不同的是，它们几乎（？）发射在每个元素上，也发射在气泡上。CCD_ 9和CCD_。由于一个已知的错误，Firefox 51及以上版本不支持此功能，但Firefox 52及以上版本完全支持。

方法2:click和focus

只有当跨度周围有其他可focus的元素时，这才有效。您所做的基本上是在任何其他元素上使用focus事件作为模糊处理程序。

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

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

我为您创建了一个演示：

$('.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>

我已经更改了你的代码，看看它。现在，如果你不键入任何内容，它会在失去焦点时保持旧值。

相关文章：