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?
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?
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>
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>
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>
I thought of the placeholder , but the text can not disappear, the user has to type below it.