本文介绍了Javascript/JQuery 使用 div/“grippie"调整文本区域的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经看过很多关于如何制作一个调整 textarea
大小的grippie"的东西,并尝试了所有的代码,但没有一个工作.有什么帮助吗?当您提出问题或发布答案时,我正在努力使其像 Stack Overflow 上的那样.
I've look at many things covering how to make a "grippie" that resizes a textarea
, and have tried all the code but none was worked. Any help? I'm trying to make it like the one on Stack Overflow when you ask a question or post an answer.
推荐答案
我找到了方法!!这里是该项目的一个小提琴.我会继续更新,让它变得更好!
I found out how to do it!! Here is a fiddle with the project. I will continue to update it and make it better!
HTML
<textarea id="textarea"></textarea>
<div id="grippie" draggable="false"></div>
QJuery/JavaScript
var resize = false;
$('#textarea').hover(function(e){
e.preventDefault();
resize = false;
});
$('#grippie').mousemove(function(e){
if(resize == true){
$('#textarea').height(e.pageY-18);
}
});
$('#grippie').mousedown(function(e){
resize = false;
resize = true;
});
$(window).mouseup(function(e){
resize = false;
});
CSS
#textarea {
padding: 2px;
width: 400px;
height: 200px;
min-height: 50px;
overflow: auto;
resize: none;
}
#grippie {
display: block;
width: 404px;
height: 5px;
background-color: #CCC;
border: 1px solid #888;
cursor: s-resize;
}
这篇关于Javascript/JQuery 使用 div/“grippie"调整文本区域的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!