CODEWITHSUNDEEP
htmlcssinput
dngr193
dngr193

Reputation: 105

How to make input bar's height dependent on amount of text

Here is my input bar's html:

<div class="btn-group">
  <input type="text" name="caption" class="btn btn-default outline input" autofocus/>
  <input type="submit" value="Submit" name="submit" class="btn btn-default outline">
</div>

I want to let the bar increase it's row when the text is filled instead of keeping one line and letting it run on. How can I do this?

Thanks!

Edit: In my html I have this php code:

if (isset($_POST["submit"])) {
if (!empty($_POST["caption"]) && !empty($_FILES["photo"]["name"]))

Therefore I need the textarea to have the id "caption" how do I do this?

Upvotes: 0

Views: 137

Answers (3)

dngr193
dngr193

Reputation: 105

I have solved the id problem. Just write: 

<textarea name="caption"></textarea>

Upvotes: 0

Tim Sheehan
Tim Sheehan

Reputation: 4014

To do a multiline input you will need to use a textarea element, but they have no ability to auto-grow on their own. You can use something like this https://github.com/ultimatedelman/autogrow though which is very easy to use e.g.

$('textarea').autogrow();

Edit:

Check to see if you're using jQuery already, if you're not put this at the bottom of your page before the closing body tag, if you're using a HTML5 doctype you can remove type="text/javascript".

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/path/to/autogrow"></script>
<script type="text/javascript">
$(function() {
    $('textarea').autogrow();
});
</script>

If you are already using jQuery somewhere, just make sure the last script tag is included after it.

Edit 2:

https://jsfiddle.net/k1cwaomo/

Upvotes: 0

coderpol
coderpol

Reputation: 303

I think it is better to use 

<textarea></textarea>

rather than,

<input type="text">

You can add rows="" attribute to the tag to assign the number of rows need to show

<textarea rows="5"></textarea>

Upvotes: 1

Related Questions