如何更改textarea調整大小的位置？

Question

我有一個像這樣的簡單textarea ：

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

上面textarea的形狀和位置是右下角，像這樣：

現在我想知道我怎樣才能把它改成這個？

Answer 1

您可以使用這個簡單的JQuery工具來調整textarea大小。

使用代碼片段

 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>

或者JSFiddle