Acabo de encontrarme con una situación en la que sería una solución elegante tener solo partes de un área de texto (previamente cargadas con texto) editables mientras que otras partes no lo están ("atenuadas", por así decirlo).
¿Es esto posible usando javascript en general?
Estaría usando jQuery.
Podrías hacer esto (solo una idea esbozada, sin código):
Diseñe una expresión regular que coincida con todo el texto. Use cadenas fijas para las partes no modificables y use [\s\S]*? para las partes modificables. Use ^ y $ para anclar su expresión regular.
/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/ Ahora reaccione al evento keyup , y probablemente también a otros eventos (como paste ).
Con cada evento relevante, verifique si la expresión regular aún coincide.
Si no es así, cancela el evento.
Efectivamente, esto debería detener las modificaciones a partes que son literales en la expresión regular y, por lo tanto, hacer que ciertas partes de su texto sean de solo lectura.
No olvide probar la cadena en el lado del servidor también después de la publicación del formulario; nunca confíe en que el cliente no puede enviar valores no válidos.
EDITAR
Puede usar una función de cotización de expresiones regulares para construir dinámicamente esa expresión regular a partir de cadenas, esto debería ahorrarle muchas molestias.
function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") }uso
var re = new Regex( "^" + [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?") + "$" );Si está utilizando un elemento de área de texto sin formato, no podrá diseñar el contenido requerido (según si ese contenido es editable o no). En el mejor de los casos, podrá verificar si el contenido que su usuario está tratando de cambiar está en la lista negra o en la lista blanca y luego detener la edición o no según corresponda. También puede proporcionar algunos comentarios visuales, como un mensaje de advertencia que diga "no puede hacer eso".
Mi recomendación sería aprovechar el atributo contenteditable , que puede tomar un poco más de tiempo para diseñar, pero le permitirá una flexibilidad mucho mayor a largo plazo.
Podría diseñar un elemento div para que se parezca mucho a su área de texto requerida, luego use intervalos editables dentro de eso para establecer si un bloque de texto en particular se puede editar o no. Luego, puede usar los comandos de JavaScript (consulte el enlace anterior) o usar un botón "Guardar" para recuperar este contenido, configurarlo como el valor para su área de texto real (que podría haber ocultado) y publicar su página de nuevo como de costumbre.
Use el siguiente código como un ejemplo aproximado.
<div id="editable-content"> <span id="block1" class="editable" contenteditable="true">This is some editable content which will </span> <span id="block2" class="non-editable">quickly be followed by some non-editable content</span> </div> <div style="display: none;"> <textarea id="PostedContent"></textarea> </div> <div> <input id="save-page" type="submit" value="Save Page" /> </div> <script type="text/javascript"> $(function () { $('#save-page').click(function () { $('#PostedContent').val($('#editable-content').text()); }); }); </script>Después de buscar, es muy difícil hacer que un área de texto sea parcialmente editable
Aquí está mi código que utilicé para este requisito.
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>