[英]Focus / blur events on contenteditable elements
我正在尝试使用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支持)?
有两种方法可以达到这种效果。
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及更高版本完全支持。
click
并focus
这仅适用于您的跨度周围有其他可focus
元素的情况。 你所做的基本上是将focus
事件用在任何其他元素上作为模糊处理程序。
$('.editable').on('click', function() {
// your code here
});
$('*').on('focus', function() {
// handle blur here
// your code here
});
我不建议在大型webapp中使用这种方法,因为浏览器性能会受到影响。
我为你创建了一个演示:
$('.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>
我已经改变了你的代码,看看它。 此外,如果您不输入任何内容,它会在失去焦点时保留旧值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.