Prevent users from pasting images into contenteditable-div-CodePudding

I have a div, which is defined like this: <div contenteditable="true" id="call-text-form-textarea"></div> But I want to prevent the user, pasting images into it.

Is there a option, to prevent it with html? Or maybe I cloud JavaScript for this?

Thanks

CodePudding user response：

You can use JavaScript.

document.getElementById('call-text-form-textarea').addEventListener('paste',function(e) {
    e.preventDefault();
});

https://codepen.io/karishmashukla/pen/NWMWZrY

CodePudding user response：

I found a answer based on Karishma Shukla's Answer and following link: JavaScript get clipboard plain text...

$("#call-text-form-textarea").bind("paste", function(e){
    var pastedData = e.originalEvent.clipboardData.getData('text');
    var regex = /^[a-zA-Z0-9@  `!@#$%^&*()_ \-=\[\]{};':"\\|,.<>\/?~] $/;
    
    if (regex.test(pastedData) !== true) {
            e.preventDefault();
            setTimeout(function(){
                $("#inputText").html('');
            },100)
    }
});

Thanks to the helpers