I want to make a textarea that has a modifiable and a non-modifiable part

Question

I want to make a textarea that has a modifiable and a non-modifiable part

Navigation

#1 by (2 votes)

1

I want to create a textarea in a form made in HTML , using simple CSS in which I can see information that I have already entered and then within the same textarea can add text.

I managed to do something similar using 2 textarea but it looks so good and in dynamic mode it is very badly stopped.

This is what I have

.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>

javascript html css3

asked by Anthony John Ramirez Llanos 27.07.2017 в 21:14

source

1 answer

Change border-bottom-color in Material Design input Center content of a cell itextsharp c #

score 2 · Accepted Answer

Directly on a TextArea is not possible by any means, what you can do is "emulate" a text area with an editable div, I'll give you a quick example

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" />