0

Tenho o seguinte textarea já com uma parte do texto digitado:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control" id="text1" name="text" style="overflow: hidden; word-wrap: break-word; resize: none; height: 160px; width: 100%;">Estimado Familiar, pedimos que traga para o utente o seguinte produto: </textarea>

Pretendo que este texto digitado não seja possível elimina-lo, mas que permita acrescentar o nome do produto (acrescentar mais texto).

Neste caso permite acrescentar mais texto, mas o problema é que permite eliminar partes da frase ou a frase em completo

7
  • Por que não usa dois campos, com um deles acessível para o usuário digitar e junta tudo depois quando for enviar para o servidor?
    – Benilson
    28/11/2019 às 11:28
  • Então não seria mais simples fazer um input text simples que a pessoa apenas insira o nome do produto? Se o texto é fixo, você pode inseri-lo quando for tratar as informações do formulário.
    – Woss
    28/11/2019 às 11:29
  • @Woss pretendo que o texto fique visível para o utilizador. Eu já consegui fixar o texto com uma div, mas não fica como pretendo visualmente, veja aqui: exemplo, mas pretendia que o texto ficasse dentro das linhas da folha.
    – Bruno
    28/11/2019 às 11:33
  • Cara a melhor forma de fazer isso, ou pelo menos a mais fácil, e fazer um text área falso... o texto vai parecer que está dentro, mas na verdade está fora... Ficaria tipo assim, sendo que a caixa de texto começa da linha vermelha para baixo prntscr.com/q3ak9c
    – hugocsl
    28/11/2019 às 11:38
  • @hugocsl e como posso fazer isso
    – Bruno
    28/11/2019 às 11:40

1 Resposta 1

2

Não é uma resposta super sofisticada, mas é algo que pode te ajudar de maneira bem simples, sem JS ou regex.

Eu fiz um box, imitando que é um textarea e a frase na verdade fica fora do textarea. Só tenha em mente que vc tem que fazer alguns ajustes de acessibilidade colocando role="textbox" na div para ela semanticamente fica mais coerente, o taxtarea continua sendo acessível pelo tab o que é bom, mas eu tive que "transferir" o outline do :focus da textarea para a div, para isso usei o css :focus-within, assim quando vc clica no textarea dentro do box, o box que vai receber o outline

inserir a descrição da imagem aqui

Lembre de deixar tudo acessível com role e aria na div, e for na label que tem o texto do textarea!

Segue o código da imagem acima

.box {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0.2em;
  width: 600px;
  height: 200px;
}
.box:focus-within {
  box-shadow: 0px 0px 0px 2px cornflowerblue;
}
.box label {
  margin: 0;
  padding: 0;
  width: 100%;
}
.box textarea {
  resize: none;
  outline: none;
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 170px;
}
<div class="box" role="textbox" aria-labelledby="listaProdutos">
  <label for="lista" id="listaProdutos">Estimado Familiar, pedimos que traga para o utente o seguinte produto: </label>
  <textarea name="" id="lista" ></textarea>
</div>

4
  • era mesmo isso que procurava, mas estou a ter dificuldade em ajustar a label e textarea sem se perceber que são duas coisas diferentes, vê como fica: o meu resultado, podemos falar no chat só para ajustar o css que tinha com o css da box?
    – Bruno
    28/11/2019 às 12:23
  • 1
    @Bruno Cara agora já estou no trabalho fica difícil fazer essas coisas. mas pelo que vi na imagem sua textarea está herdando alguns estilos do pai, da div que está dentro.... vc tem que limpar esses estilos de textarea, coloca background none nela, coloca tb outline none como eu fiz no exemplo, se precisar coloca position:relative no box pai, e na textarea alinha com bottom/left... Em último caso abre outra pergunta pedindo ajuda com esse alinhamento, explica a situação e coloca seu código mais atual e completo ok!!
    – hugocsl
    28/11/2019 às 12:37
  • 1
    já resolvi. Obrigado
    – Bruno
    28/11/2019 às 12:47
  • @Bruno boa jovem! legal que resolveu ai!
    – hugocsl
    28/11/2019 às 12:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .