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

Question

I'm trying to listen to focus / blur events on span with contenteditable=true attribute.

So here's what I tried (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);
    }
});

But he doesn't seem to work, because span doesn't handle focus / blur . How can I achieve that anyway (IE8 support needed) ?

Answer 1

There are two ways to achieve this effect.

Approach 1: focusin and focusout

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

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

focusin and focusout are like focus and blur events, but unlike the latter, they are fired on almost(?) every element, and also bubble. focusin and focusout are a part of DOM level 3 Specification. Firefox 51 and older didn't support this due to a known bug , but Firefox 52 and above have full support.

Approach 2: click and focus

This only works if you have other focus able elements around your span. What you do is basically use the focus event on any other element as a blur handler.

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

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

I wouldn't recommend this approach in a large webapp, because browser performance will take a hit.

Answer 2

I have created a demo for you:

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

I have changed your code, take a look it. Also now it's keeping the old value when lost the focus if you don't type anything.