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

Question

我正在嘗試使用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支持）？

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級規范的一部分。 由於已知錯誤 ，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
});

我不建議在大型webapp中使用這種方法，因為瀏覽器性能會受到影響。

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> 

我已經改變了你的代碼，看看它。 此外，如果您不輸入任何內容，它會在失去焦點時保留舊值。