disable background color of text when copy pasting

Anyone know how to disable text background color when copy pasting ?

9 Replies

Avinash•14mo ago

As you can see when i copy pasted text background color is included in that field

Is it pasting it within spans? And if so I'm presuming inline styling is being added. Just wait for the event and grab the clipboard, grab the inner contents of the html and put it into a clean span

Avinash•14mo ago

No, its just a div. i couldnt replicate it in code pen. thisis how i used

 <div class="comment-box" contenteditable="true"data-placeholder="Write a comment..."></div>

 <div class="comment-box" contenteditable="true"data-placeholder="Write a comment..."></div>

[contenteditable="true"]:empty:not(:focus):before {
  content: attr(data-placeholder);
}

[contenteditable="true"]:focus:empty::after {
  outline: 1px solid var(--label-teal);
  border: none;
  border-radius: var(--border-radius);
}

[contenteditable="true"]:empty:not(:focus):before {
  content: attr(data-placeholder);
}

[contenteditable="true"]:focus:empty::after {
  outline: 1px solid var(--label-teal);
  border: none;
  border-radius: var(--border-radius);
}

Coder_Carl•14mo ago

Ah I'm not sure about content editable stuff sorry. I'm sure that you'd still be able to listen for the event and then copy the inner text placing within a div

Unknown User•14mo ago

Message Not Public

Avinash•14mo ago

if i implement ::section{background-color:transparent} then the user visualize the selection i dont want that. the only issue is when user copy paste text from various sources, its also copying the background color of the container which the text is placed

Unknown User•14mo ago

Message Not Public

Avinash•14mo ago

im selection i used this

JS var ce = document.querySelectorAll("[contenteditable]");

ce.forEach((value) => {
  value.addEventListener("paste", (e) => {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertText", false, text);
  });
});

JS var ce = document.querySelectorAll("[contenteditable]");

ce.forEach((value) => {
  value.addEventListener("paste", (e) => {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertText", false, text);
  });
});

worked like a charm thumbup

Unknown User•14mo ago

Message Not Public

Gaming

Programming

disable background color of text when copy pasting