如何改变textarea调整大小的位置？ [英] How to change the position of textarea resizing?

问题描述

我有一个简单的 textarea ，就像这样：

I have a simple textarea like this:

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

上述 textarea的形状和位置是右下角，如下所示：

现在我想知道如何将其更改为此？

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

推荐答案

您可以使用这个简单的 JQuery 工具来调整 textarea的大小。

You can use this simple JQuery tool to resize 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

Or JSFiddle

这篇关于如何改变textarea调整大小的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！