Text already written in the blocked textarea

Asked

Viewed 151 times

0

I got the following textarea already with a part of the text typed:

<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>

I intend that this typed text is not possible to delete it, but to add the name of the product (add more text).

In this case you can add more text, but the problem is that you can delete parts of the sentence or phrase in full

html

  • Why not use two fields, with one of them accessible for the user to type and join everything later when sending to the server?

  • So wouldn’t it be simpler to make a simple input text that the person just enters the product name? If the text is fixed, you can insert it when handling the form information.

  • @Woss I want the text to be visible to the user. I already managed to fix the text with a div, but it doesn’t look like I want to visually, see here: example, but intended that the text stay within the lines of the sheet.

  • Face the best way to do this, or at least the easiest, and make a text area fake... the text will look like it’s inside, but it’s actually outside... It would look like this, with the text box starting from the red line down http://prntscr.com/q3ak9c

  • @hugocsl and how can I do it

  • I’ll give you an answer

  • @hugocsl thank you

Show 2 more comments

1 answer

2


It’s not a super sophisticated answer, but it’s something that can help you quite simply, without JS or regex.

I made a box, imitating it’s a textarea and the phrase actually stays outside the textarea. Just keep in mind that you have to make some accessibility adjustments by putting role="textbox" in the div for it semantically becomes more coherent, the taxtarea continues being accessible by tab what is good, but I had to "transfer" the outline of :focus of textarea to the div, for this I used css :focus-within, so when you click on textarea inside the box, the box that will receive the outline

inserir a descrição da imagem aqui

Remember to make everything accessible with role and aria in div, and for in label which has the text of textarea!

Follow the image code above

.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>

  • that’s what I was looking for, but I’m having a hard time adjusting the label and textarea without realizing that they’re two different things, see how it looks: my result, we can talk in chat just to adjust the css you had with the box css?

  • 1

    @Bruno Cara now I’m already at work it gets hard to do these things. but from what I’ve seen in the image your textarea is inheriting some of the father’s styles from the div that’s inside.... you have to clean these textarea styles, put background None on it, put tb Outline None as I did in the example, if you need to put position:relative in the parent box, and the textarea aligns with bottom/left... In the latter case opens another question asking for help with this alignment, explains the situation and puts your most current and complete code ok!!

  • 1

    I already solved it. Thank you

  • @Good young Bruno! nice that solved there!

Browser other questions tagged html

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