How to make a certain part of textarea read-only-CodePudding

I have a text area and I dynamically add data to it and it works fine. What I wanted to achieve was after the data is appended that data cant be altered (edited) but after the last element of the data user can start typing on the textarea. I was thinking of maybe calculating the length of string data the set read-only to that part. How can I achieve this? Any help is appreciated. Thanks in advance.

For a visual example take a look at the terminal of this website: https://www.online-python.com/

function test() {
  x = 'this is a string to be appended to text area'
  document.getElementById("textArea").value = x;
}

<textarea id="textArea"></textarea>
<button onclick="test()">Append</button>

CodePudding user response：

You can add a keydown event listener that checks whether the selectionStart is smaller than the length of the textarea's value minus the length of the string appended:

let x = 'this is a string to be appended to text area'
var hasAppended = false;

function test() {
  hasAppended = true
  document.getElementById("textArea").value = x;
}

textArea.addEventListener('keydown', function(e) {
  if (hasAppended) {
    if (this.selectionStart > this.value.length - x.length && this.selectionStart != this.value.length) {
      e.preventDefault()
      e.stopPropagation()
    }
  }
})

<textarea id="textArea"></textarea><button onclick="test()">Append</button>

CodePudding user response：

It is not possible to selectively mark parts of a <textarea> read-only, however, a similar effect can be achieved with contenteditable elements:

function test() {
  const x = 'this is a string to be appended to text area'
  const span = document.createElement('span')
  span.appendChild(document.createTextNode(x))
  span.setAttribute('contenteditable', 'false')
  document.getElementById("textArea").appendChild(span);
}

#textArea{
  border: 1px solid black;
  height: 50px;
}

<div id="textArea" contenteditable="true"></div>
<button onclick="test()">Append</button>

However, this will still allow the user to delete the read-only block, or write before it.

CodePudding user response：

This almost works.

EDIT: Improved it a bit by changing keydown to keyup.

Now there is no need for space at the end of the read-only text and CTRL a and then backspace will make the text come back almost instantly.

Maybe you can improve on it.

window.onload = function() {
  document.getElementById('textArea').addEventListener('keyup', function (e){
    var readOnlyLength = parseInt(document.getElementById("textArea").getAttribute('data-readOnlyLength') );
    var currentLength = parseInt(document.getElementById("textArea").value.length );
    if (readOnlyLength >= currentLength ) {
        document.getElementById("textArea").value = document.getElementById("textArea").getAttribute('data-readonly') ;
    }
  }, false);
};

function test() {
  x = 'this is a string to be appended to text area'
  document.getElementById("textArea").value = x;
  document.getElementById("textArea").setAttribute('data-readonly' , x); 
  document.getElementById("textArea").setAttribute('data-readOnlyLength' , x.length); 
}

<textarea id="textArea"></textarea>
<button onclick="test()">Append</button>