Textarea with value that cannot be changed

Asked

Viewed 141 times

0

So I have a textarea like this:

<textarea id="mensagem" name="mensagem" type="text" style="width:400px; font-size:16px; height:100px; border-color:lightgray;" placeholder="Um texto qualquer" required> </textarea>

My intention is this: I will be able to type in the textarea, but only complementing the message that will already be inside. You can do it?

html textarea

  • Has. Just put a text outside the textarea so that the user knows that this text is fixed and what he is typing is an add-on.

  • When you use this, either by submitting or etc., just concatenate the fixed text to what was typed in the textarea.

  • Difficult feat to be put into practice

2 answers

0

A simpler way for the beginning of everything can be this way

<textarea id="mensagem" name="mensagem" type="text" style="width:400px; font-size:16px; height:100px; border-color:lightgray;" required>Um Texto Fixo aqui </textarea>

This way the text will already be filled inside the textarea, so when one clicks on the field, it will complement what you want in front of your sentence.

  • if the user deletes the text already emposto has already changed

  • Yes, but then you’ll have to perform a treatment, string concatenation, you’ve heard of it ?

  • If already, I recommend performing on the server side, so the user will not have access to your code and you will have your full control and the String will not be changed.

  • Yes, well before you were born. My point of view is the question and the answer.

0

If the intention is to submit the content of the textarea by clicking on a button it can be done as follows.

I will not submit the form to see the script working.

function myFunction() {
var fixo = document.getElementById("txtFixo").innerText;

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

document.getElementById("myTextarea").value = fixo + " " + texto;

document.getElementById("txtFixo").innerText="";
}
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>

Browser other questions tagged html textarea

You are not signed in. Login or sign up in order to post.