I just came across a situation in which it would be an elegant solution to have only portions of a text area (previously loaded with text) be editable while other portions are not (greyed out, so to speak).
Is this possible at all by using javascript in general?
I would be using jQuery.
After searching find it's really hard to make a text area partially editable
Here is my code that i used for this requirement
input
{
width:100%;
border:0px solid;
outline:none
}
<!DOCTYPE html>
<html>
<div style=padding: 2px;border:1px solid #ccc;width: 82%;max-height:100px;min-height: 51px;overflow:auto;outline: none;resize: both; contenteditable=true unselectable=on>
<input placeholder=enter prefix... value=editable postfix... ></input>
<div id='unEditable' style=background-color:yellow;width: fit-content;padding-left:10px;padding-right:10px;border-radius:10px;height: fit-content; contenteditable=false unselectable=off onkeyup= >
fixed content non-editable
</div>
<input placeholder=enter postfix... value=editable prefix... style='width:97%'></input>
</div>
</html>
