当用户输入这么多字符以及点击按钮时,我有一个文本区域框,从3行扩展到17行。
SetNewSize(); function是通过onkeyup调用的,当长度大于50时扩展文本区域。
morespace();通过按钮调用函数。
我想在发生这种情况时将框滑出来,有什么想法吗?
谢谢,这是我的代码:
function SetNewSize(textarea){
if (textarea.value.length > 50)
{
textarea.rows = 17;
}
else
{
textarea.rows = 3;
}}
function morespace(){
var thetxt = document.getElementById('more').value;
var box = document.forms["myForm"]["comment"];
if(box.rows == 3)
{
$("#emailme").fadeOut(800);
box.rows = 17;
document.getElementById('more').innerHTML = "less space?";
}
else
{
$("#emailme").fadeIn(800);
box.rows = 3;
document.getElementById('more').innerHTML = "more space?";
}}
答案 0 :(得分:3)
通过“滑出盒子”,我猜你的意思是动画它。虽然您可能无法在jQuery中为textarea行设置动画,但您可以为textarea的height
设置动画,以便为用户提供更多空间。例如,你触发这样的事情:
$('#comment').animate({'height': '+=40'},200);
每次触发时都会增加40像素的高度,并且可以平滑地动画。如果要添加数字行,可以简单地计算出想要textarea的大小,然后将其设置为该高度的动画。
以下是此操作的JSFiddle link,您可能需要查看jQuery animate API。
答案 1 :(得分:0)
嗯,快速回答是使用某人已经做过的事情:https://github.com/gurglet/jQuery-Textarea-Autoresize-Plugin
但是如果你想自己动手,我会立刻用你需要的代码更新我的回复。
更新的答案: 假设你有这个HTML:
<button id="emailme">Email me</button>
<form id="myForm">
<input id="more" name="more" type="text">
<textarea id="comment" name="comment" rows="3">
</textarea>
</form>
然后您可以使用此脚本:
(function(){
var BIG = 17,
SMALL = 3,
currentSize = SMALL,
changeSize = function(rows) {
var $more = $("#more"),
thetxt = $more.val(),
$box = $("#comment"),
currentRows = $box.prop("rows"),
boxRowHeight = $box.height()/currentRows,
newHeight = rows * boxRowHeight;
if (rows === currentRows) return;
return $box.animate({'height': newHeight }, 500 , "swing", function(){
$more.val((currentRows > rows) ? "more space?" : "less space?");
$box.prop("rows", rows);
currentSize = rows;
}).promise();
},
setNewSize = function(event) {
var $area = $(event.target);
if ($area.val().length > 50 && currentSize === SMALL) {
changeSize(BIG);
currentSize = BIG ;
}
};
$("#comment").bind("keyup", setNewSize);
$("#more").click(function(){
if (currentSize === BIG) {
$.when(changeSize(SMALL)).then(function(){
$("#emailme").fadeIn(800);
});
}else{
$.when(changeSize(BIG)).then(function(){
$("#emailme").fadeOut(800);
});
}
});
})();
JSFiddle Link:http://jsfiddle.net/isochronous/fvtY7/
答案 2 :(得分:-1)
你也可以像这样使用jquery的attr():
$('#comment').attr('rows', 17);
其中rows表示cahnge的属性,17表示要设置的值。 要获取当前使用的行数,请使用:
var rows = $('#comment').attr('rows');