在制作移动端编辑器器时，使用了div的contenteditable属性，把div做成一个可输入富文本的编辑器。
因为input有一个placeholder的属性，但是实测div并没有这个属性，于是打算使用jq模拟编辑器的placeholder属性。但是制作的时候发现，div并没有change事件，查阅W3C的文档时发现只有input、textarea、select存在change事件。
后在sf看到一篇帖子 可以给contenteditable添加change事件吗
可以使用input事件检测节点内容的变化，遂尝试之，解决。
demo如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
| $('.editor-box .editor').on('click', function() {
if ($.trim($(this).html()) === '请为你的帖子装点下内容吧~') {
$(this).html('')
}
}).on('blur', function() {
if ($.trim($(this).html()) === '') {
$(this).html('请为你的帖子装点下内容吧~')
}
}).on('input', function() {
if ($.trim($(this).html()) === '') {
$(this).html('请为你的帖子装点下内容吧~')
}
})
|
