How do I limit a text box?

Asked

Viewed 82 times

1

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

html

  • What do you mean by limit lines? do you refer to the broken line entered by the user? or the one that is done automatically when it reaches the edge of the textarea?

4 answers

2

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

Click Place a text, click Out 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>
<input id="texto" type="text"  maxlength="20" size="2"/>

2

Follow an example, she’s the height of 1rem that is, 100% of the height of the default font. And when you focus on it it gets height of 3em, ie 3x the height of the parent element font. This makes the size a little more responsive.

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

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>

1

Using the attributes of <textarea>:

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

cols -> number of columns

Rows -> number of lines

wrap -> word break

Reference of textarea

1

I prefer to separate the responsibilities to avoid command-inline. I think you better get used to it that way too, but the two ways 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;
}

Browser other questions tagged html

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