1

Deseo crear una textarea dentro de una forma hecha en HTML, usando simple CSS en la que puedo ver una información que ya he introducido y después dentro del mismo textarea poder agregar texto.

Logre hacer algo parecido usando 2 textarea pero se ve tan bien y en modo dinámico queda muy mal parado.

Esto es lo que tengo

.var {
  margin-top: -15px;
  border-top: none;
}
<form>
  <fieldset>
    <legend>Textarea with Fixed Text Portion</legend>
    <textarea readonly="readonly" cols="50" rows="2">This part of the textarea content is fixed and cannot be changed</textarea> `introducir el código aquí`<br/>
    <textarea class="var" cols="50" rows="10">but the rest of the textarea content can be changed to whatever you want.</textarea>
  </fieldset>
</form>

3
  • Lo que pides no es posible hacerlo con css3, quiza si con js
    – ByGroxD
    el 27 jul. 2017 a las 19:19
  • Desafortunadamente los textarea no cuentan con funcionalidad como la que ocupas, donde puedas agregar etiquetas HTML dentro del texto del input y aplicarle estilos css (disabled, display, color, etc), Este ejemplo es lo más cercano a lo que ocupas, donde simulas un text area dentro de un div y adentro de este puedes agregar etiquetas HTML y aplicar estilos, pero no es un método recomendado, te debo la explicación porque aquí el artículo que quería leer está bloqueado de la red. jsfiddle.net/mekwall/XNkDx
    – Yikarus
    el 27 jul. 2017 a las 19:31
  • Gracias voy a ver si hay algun metodo, no estoy cerrado a JavaScript/ Jquery/ angular o bootstrap pero necesito solucionar este detalle.GRACIAS el 27 jul. 2017 a las 19:55

1 respuesta 1

2

Directamente sobre un TextArea no es posible por ningin medio, lo que se puede hacer es "emular" un text area con un div editable, te pongo un ejemplo rápido

function send(){
var valor = "";
$("#ta > .row").each(function(){
  valor += this.innerHTML + "\r\n";
});
console.log("Valor del TextArea: ");
console.log(valor);
}

function editar(textArea){
$(textArea).children("[contenteditable='true']").focus();
}
.simulatextarea {border: 1px #CCC solid; padding: 3px;}
.simulatextarea .row {height: 18px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="ta" class="simulatextarea" onclick="editar(this)">
  <div class="row" contenteditable="true"> </div>
  <div class="row" >Texto fijo</div>
</div>
<br>
<input type="button" onclick="send();" value="Enviar" />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.