我希望在用户编辑具有contenteditable属性的
内容时运行函数。相当于onchange事件的是什么?
我正在使用jQuery,因此任何使用jQuery的解决方案都是首选。谢谢!
我正在使用jQuery,因此任何使用jQuery的解决方案都是首选。谢谢!
在 Angular 2+ 中
<div contentEditable (input)="type($event)">
Value
</div>
@Component({
...
})
export class ContentEditableComponent {
...
type(event) {
console.log(event.data) // <-- The pressed key
console.log(event.path[0].innerHTML) // <-- The content of the div
}
}
$('body').delegate('#editor', 'focus', function(){
$(this).data('before', $(this).html());
});
$('#client_tasks').delegate('.task_text', 'blur', function(){
if($(this).data('before') != $(this).html()){
/* do your stuff here - like ajax save */
alert('I promise, I have changed!');
}
});
<div id="editor" contenteditable="true" >Some text here</div>
JS
const input = document.getElementById('editor');
input.addEventListener('input', updateValue);
function updateValue(e) {
console.log(e.target);
}
对我来说,我想要检查输入是否有效。
如果有效,则更新,否则显示错误消息并保持值与之前相同。
技巧:当您完成编辑时,通常会触发模糊事件。
<span contenteditable="true">try input somethings.</span>
<script>
const elem = document.querySelector(`span`)
let oldValue = elem.innerText
elem.onkeydown = (keyboardEvent) => {
if (keyboardEvent.key === "Enter") {
elem.blur() // set focusout
}
}
elem.onblur = (e) => {
const curValue = elem.innerText
if (curValue === oldValue) {
return
}
if (curValue.length <= 50) { // Input your conditions.
// fail
elem.innerText = oldValue
// (Optional) Add error message
elem.insertAdjacentHTML("beforeend", `<span style="margin-left:5px;color:red">error length=${curValue.length}. Must greater than 50. undo to the previous value.</span>`)
const errMsg = elem.querySelector(`span`)
setTimeout(() => errMsg.remove(), 3500) // wait 3.5 second, and then remove it.
return
}
// OK, update
oldValue = curValue
}
</script>
var timeoutID;
$('[contenteditable]').bind('DOMCharacterDataModified', function() {
clearTimeout(timeoutID);
$that = $(this);
timeoutID = setTimeout(function() {
$that.trigger('change')
}, 50)
});
$('[contentEditable]').bind('change', function() {
console.log($(this).text());
})
DOMCharacterDataModified
不会触发。在这种情况下,DOMSubtreeModified
更合适。此外,人们应该记住,旧版浏览器不支持这些事件。 - Andy E(function ($) {
$.fn.wysiwygEvt = function () {
return this.each(function () {
var $this = $(this);
var htmlold = $this.html();
$this.bind('blur keyup paste copy cut mouseup', function () {
var htmlnew = $this.html();
if (htmlold !== htmlnew) {
$this.trigger('change')
}
})
})
}
})(jQuery);
您可以简单地调用$('.wysiwyg').wysiwygEvt();
如果需要,您也可以删除/添加事件
innerHTML
是昂贵的),这将变得缓慢和卡顿。我建议在可能的情况下使用input
事件,并回退到类似于此但带有某种去抖动的东西。 - Tim Down当带有contentEditable属性的元素被更改时,onchange事件不会触发。一个建议的方法是添加一个按钮来“保存”更改。
查看此插件,它以此方式处理这个问题:
在可编辑元素上设置输入事件触发器
document.getElementById("contenteditableElement").addEventListener("input", function() { elementEdited(); }, false);
在可编辑元素失去焦点时保存值
jQuery("#contenteditableElement").blur(function(){ //一旦元素失去焦点,您可以保存新值等等.. });
var cont;
$("div [contenteditable=true]").focus(function() {
cont=$(this).html();
});
$("div [contenteditable=true]").blur(function() {
if ($(this).html()!=cont) {
//Here you can write the code to run when the content change
}
});
$("div [contenteditable=true]")
将选择一个div的所有子元素,无论是直接还是间接的,只要它们是可编辑的。 - Bruno Ferreira
document.getElementById("editor").oninput = function() { ...}
。 - Basj