JQuery Textarea Expanding on Keypress | Lessoncup Programming Blog

Sunday, 13 October 2013

JQuery Textarea Expanding on Keypress

This lesson about to how the facebook wall status box expanding while pressing Enter and collapsing while pressing Backspace keyword. we can implement this kind of expanding's using JQuery and some logic to use .height() property. let's see how will do this.

JQuery Textarea Expanding on Keypress

Javascript

here i am using keyup event function to the textarea .status class. now when we press enter key the actual height of the textarea box will increase the height +20 pixels and it will continues increase.
when we press backspace key the height of the textbox will decrease the present height to -20 pixels.


<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('.status').focus(function(){
  
  $('.status').addClass('statusfocus');
  $('.postbar').show();
  
 });
 
 $('.status').keyup(function(){
  
  var keycode = (event.keyCode ? event.keyCode : event.which);
  
  if(keycode == '13'){
   
   $(this).height($('.status').height()+20);
  
  }
  
  if(keycode == '8'){
   
   if($('.status').height()==50){
    $('.status').height(50);
   }else{

   $(this).height($('.status').height()-20); 

   }
  }
  
 })
 
});

</script>

HTML

<div id="statusbox">
<form action="" method="post" name="statusform">
<textarea name="status" class="status" id="status" placeholder="What's on your mind?" title="What's on your mind?"></textarea>
<div id="postbar" class="postbar">
<input name="post" type="submit" value="Post"  class="postbtn" />
</div>
</form>
</div>

CSS

<style>

body{ font-family:Arial; font-size:12px;}

#wallBoard{ margin:0 auto; width:800px; height:auto; border:solid #69F 1px; padding:10px;}

#title{margin:0 auto; width:460px; padding:0 0 30px 0;}

h1{ font-family:Tahoma, Geneva, sans-serif; color:#09C; font-weight:normal; margin:0 auto;}

#statusbox{ width:515px; height:auto; border:solid #EBEBEB 1px; margin:0 auto;}

.status{resize:none; width:500px; height:15px;padding:5px; margin:0 auto; border:0; outline:0; font-size:12px; font-family:Verdana, Geneva, sans-serif;
color:#000;}

.statusfocus{ height:50px; overflow:hidden;word-wrap:break-word;white-space: pre-wrap;display: inline-block;text-align: start;}

.postbarfocus{ position:absolute;}

.postbar{ width:511px; height:32px; padding:2px; background-color:#f2f2f2; margin-top:-3px; display:none; border-top:1px #e6e6e6 solid;}

.postbtn{ width:69px; padding:5px; background-color:#96b469; background-image:url(postbg.jpg); font-weight:bold; color:#FFF; border:1px solid #96b469;float:right; font-size:12px; cursor:pointer;}


</style>


Live Demo

2 comments :

  1. Thank you very much for the articles.
    They are very nice and educative

    ReplyDelete
  2. Why does the "Post" button appear when you focus on the text area the first time but not disappear when you shift focus out of the text area?

    Why do you keep switching between $(this) and $('.status') to refer to the same thing within the context of the "keyup" event handler (and I think you're missing the "event" parameter in that handler function)?

    I made some changes to streamline and improve both the performance (in minor ways) and the understandability of the code: http://jsbin.com/bolaje/1/edit

    Just in quick, rudimentary testing I found the following behavioral issues:

    1. The line height of 20 doesn't really match up with the line height of the text in the text area so as you hit "Enter" over and over again the amount of white space between the last line of text and the bottom edge of the text area continues to increase.

    1. The "Backspace" height reduction functionality doesn't quite work as-is since it doesn't account for someone holding down the backspace key or selecting multiple lines of text before hitting the backspace key.

    I haven't put much thought into possible solutions for these issues. For the "holding down the backspace key" issue you might want to consider using a debounced function for the event handler. For the "line heights don't match up" issue you may want to consider grabbing the line height of the text area to use as the value instead of an arbitrarily chosen hard-coded value of 20.

    Just some thoughts...

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons