Tengo un área de texto y le agrego datos dinámicamente y funciona bien. Lo que quería lograr era que después de agregar los datos, los datos no se pueden modificar (editar), pero después del último elemento de los datos, el usuario puede comenzar a escribir en el área de texto. Estaba pensando en tal vez calcular la longitud de los datos de cadena del conjunto de solo lectura para esa parte. ¿Cómo puedo conseguir esto? Cualquier ayuda es apreciada. Gracias por adelantado.
Para ver un ejemplo visual, eche un vistazo a la terminal de este sitio web : 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>No es posible marcar selectivamente partes de un <textarea> como de solo lectura, sin embargo, se puede lograr un efecto similar con elementos contenteditable :
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>Sin embargo, esto aún permitirá al usuario eliminar el bloque de solo lectura o escribir antes de él.
Puede agregar un detector de eventos keydown que verifique si el inicio de selectionStart es más pequeño que la longitud del valor del área de texto menos la longitud de la cadena adjunta:
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>Esto casi funciona.
EDITAR: Lo mejoró un poco cambiando keydown a keyup .
Ahora no hay necesidad de espacio al final del texto de solo lectura y CTRL+a y luego retroceso harán que el texto regrese casi instantáneamente.
Tal vez puedas mejorarlo.
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>