How to change the position of textarea resizing?

Question

I have a simple textarea like this:

<textarea name="txtarea" cols="14" rows="4"></textarea>

The shape and position of the above textarea is bottom-right-corner , like this:

Now I want to know how can I change it to this?

Answer 1

You can use this simple JQuery tool to resize textarea .

Use code snippet

 var KeyDown; $(".TxtArea > div").mousedown(function() { $(this).parent().addClass("Resize"); $("body").addClass("UnSelectable"); KeyDown = 1; }); $(document).mouseup(function() { $(".TxtArea").removeClass("Resize"); $("body").removeClass("UnSelectable"); KeyDown = 0; }); $(document).mousemove(function(Event) { if (KeyDown == 1 && $(".TxtArea").hasClass("Resize")) { var Height = Event.pageY - $(".TxtArea").children("textarea").offset().top; $("textarea").height(Height); } });

 .TxtArea { width: 300px; } .TxtArea > textarea { width: 100%; display: block; resize: none; box-sizing: border-box; } .TxtArea > div { height: 10px; background: #eee; border: 1px solid #ddd; box-sizing: border-box; text-align: center; line-height: 0px; } .TxtArea > div:hover { cursor: n-resize; } .UnSelectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="TxtArea"> <textarea></textarea> <div>.....</div> </div>

Or JSFiddle