Consider the following span:
<span class="comment-box2" role="textbox" contentEditable=true></span>
Using the following CSS:
.comment-box2 {
display: block;
width: 100%;
overflow: hidden;
outline: none;
min-height: 40px;
line-height: 20px;
padding-left: 8px;
background-color:#F5FFFA;
border-radius:15px;
border: 1px solid #708090;
display:inline-block;
width:330px;
}
When I paste plain text from a website inside the span with role="textbox" mentioned above, it creates another span inside it as seen through inspect element. The inner span code looks like this:
<span jsname="YS01Ge" style="color: rgb(32, 33, 36); font-family: arial, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">Foot on the pedal never ever false metal</span>
The text "Foot on the pedal never ever false metal" is what I copied from the website. How can I prevent the creation of this inner span with all its attributes and only paste the plain text onto the span with role="textbox"?
If I just type plain text inside the span, everything works fine and no inner span is generated. However, when text is pasted, the undesired inner span is created along with a white background which I am trying to remove.