Insert fixed text in Textarea

Question

I am making a form on an ASP3 page that has to bring a fixed text in Textarea. This text cannot be changed and the user type below it has to save in the database without this fixed text.

Someone’s done something like this?

Answer 1

If the intention is to submit only the contents of the textarea by clicking a button can be done as follows

function myFunction() {

var texto=document.getElementById("myTextarea").value;

console.log(texto);
}

div.textarea-container {
   border: solid 1px #808080;
   overflow: auto;
   width: 400px;
   padding: 2px;
   font-family: Arial;
   font-size: 12px;
}

div.textarea-container textarea {
   font-family: Arial;
   font-size: 12px;
   overflow: auto;
   border: none;
   outline: none;
   width: 400px;
   height: 100px;
   margin: 0px;
   padding: 0px;
   resize: none;
}

<div class="textarea-container" onclick="document.getElementById('myTextarea').focus()">
    <div id="txtFixo">Textarea com value que não da pra mudar.<br>Qual é a cor do cavalo branco do Napoleão? </div>
    <textarea id="myTextarea" style="width:400px; font-size:16px; height:100px; border-color:lightgray;" placeholder="Responda aqui" required></textarea>
</div>

<button type="button"  onclick="myFunction()">Submit</button>

Answer 2

I suggest the placeholder property by inserting the text you want. Example:

<textarea rows="4" cols="50" placeholder="Texto temporário"></textarea>

However, when you start typing this text will disappear. If you want to leave a text in plain view, I suggest placing it above or below the textarea.

Or two components can be used, one being disabled: (suggestion from Ricardo Pontual)

<textarea rows="1" cols="50" disabled>Digite seu texto</textarea>
<textarea rows="4" cols="50"></textarea>

Answer 3

A suggestion using Javascript. Wrap the textarea in one element <span> with overflow: hidden and create another span after the textarea with the fixed text you want, and put a class in it, this way:

<span style="overflow: hidden;">
   <textarea style="width: 400px; height: 100px; padding: 5px;"></textarea>
   <span class="textofixo">Texto fixo, Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</span>

In CSS put the style of the class and the span:

<style>
span{
   position: relative;
   display: inline-block;
}

.textofixo{
   position: absolute;
   top: 0;
   left: 0;
   padding: 5px;
}
</style>

Include this Javascript in the page:

<script>
document.addEventListener("DOMContentLoaded", function(){
   var area = document.querySelector("textarea");
   var tFixo = document.querySelector(".textofixo");
   var tFixoHeight = tFixo.offsetHeight;
   area.style.paddingTop = tFixoHeight+"px";

   tFixo.onclick = function(){ area.focus() };

   area.oninput = function(){
      if (this.clientHeight < this.scrollHeight){
         tFixo.style.top = -(this.scrollHeight-this.clientHeight)+"px";
      }else{
         tFixo.style.top = "0";
      }
   }
});
</script>

The span with the fixed text will be positioned on top of the textarea and Javascript will adjust the top spacing (padding-top) of the field according to the height of the span which contains the fixed text. If scroll in the field, the span will rise too, simulating as if it were part of the textarea.

The event onclick applied to span will force the focus to the textarea.

See in operation:

document.addEventListener("DOMContentLoaded", function(){
   var area = document.querySelector("textarea");
   var tFixo = document.querySelector(".textofixo");
   var tFixoHeight = tFixo.offsetHeight;
   area.style.paddingTop = tFixoHeight+"px";
   
   tFixo.onclick = function(){ area.focus() };
   
   area.oninput = function(){
      tFixo.style.top = this.clientHeight < this.scrollHeight ?
         -(this.scrollHeight-this.clientHeight)+"px" :
         "0";
   }
});

textarea, .textofixo {
   font-family: Arial;
   font-size: 14px;
}


/* códigos necessários abaixo */
span{
   position: relative;
   display: inline-block;
}

.textofixo{
   position: absolute;
   top: 0;
   left: 0;
   padding: 5px;
}

<span style="overflow: hidden;">
   <textarea style="width: 400px; height: 100px; padding: 5px;"></textarea>
   <span class="textofixo">Texto fixo, Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</span>

Answer 4

I thought about the placeholder, only that the text cannot disappear, the user has to type below it.