Insert fixed text into Textarea

0

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

Has anyone done anything like this?

    
asked by anonymous 26.07.2018 / 22:00

4 answers

1

If the intent is to only submit textarea content when you click a button it 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>
    
27.07.2018 / 02:04
0

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

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

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

Or you can use two components, one being disabled: (suggestion of Ricardo Pontual)

<textarea rows="1" cols="50" disabled>Digite seu texto</textarea>
<textarea rows="4" cols="50"></textarea>
    
26.07.2018 / 22:06
0

A suggestion using JavaScript. Involve textarea in a <span> element with overflow: hidden and also create another span after textarea with the fixed text you want, and put a class in it, like this:

<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 class style and span :

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

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

Include this JavaScript on 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% w / w with the fixed text will be positioned above the% w and% JavaScript will adjust the top padding-top of the field according to the height of the span which contains the fixed text. If there is scroll in the field, the textarea will also go up, simulating as if it were part of span .

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

See working:

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>
    
27.07.2018 / 00:23
-1

I thought of the placeholder , but the text can not disappear, the user has to type below it.

    
26.07.2018 / 22:14