How do I limit a text box?

Question

How do I limit a text box?

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (1 votes)

1

I need to put a line limit in a text box, and also use a trasition so that when the person clicks on the text it opens and shows the whole message. If anyone has any ideas Thank you XD

html

asked by anonymous 15.05.2018 / 22:06

4 answers

Error creating a Custom Exception Using block and Exceptions

score 2 · Answer 1

Here is an example where the size of the field will increase if the text is larger than the initial size you set.

Click place a text, click outside and click the input again to test!

$( "#texto" ).click(function() {
  var tamanhoTexto = $(this).val().length;
  if (tamanhoTexto > 2){
     console.log(tamanhoTexto);
     $(this).attr('size',tamanhoTexto);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="texto" type="text"  maxlength="20" size="2"/>

score 2 · Answer 2

Here's an example: it has the height of 1rem ie 100% of the height of the default font. And when you focus on it it gets height of 3em , that is 3x the height of the font of the parent element. This makes the size a bit more responsive.

I used required to make the style rules in CSS, so if the field is not filled it always stays in its original size. Also set resize:none; to not let user increase box size

The animation you can do with transition as in the example below:

textarea {
    width: 300px;
    height: 1rem;
    resize: none;
    transition: height 700ms;
}
textarea:focus, textarea:valid  {
    height: 3em;
}

<form action="">
    <textarea required></textarea>
    <input type="submit">
</form>

score 1 · Answer 3

Using the attributes of <textarea> :

<textarea name="textarea" cols="10" rows="10" wrap="textarea">

cols - > number of columns

rows - > number of lines

wrap - > breaking text

textarea

score 1 · Answer 4

I'd rather separate responsibilities to avoid command-inline. I think you'd better get used to it that way, but the two forms above are not wrong.

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}