[英]expand textarea when onFocus
I have number of textarea fileds and I want them all to expant when they are on focus 我有很多textarea字段,我希望它们全部集中时都可用
here is a demo of my code: http://jsfiddle.net/PU73y/ 这是我的代码的演示: http : //jsfiddle.net/PU73y/
The issue is that they don't expand at the moment I click on them. 问题是,当我单击它们时,它们不会扩展。 why is that?
这是为什么?
Thanks 谢谢
<textarea id='txt1' class='txt' refID='1' style='height: 15px;'>this is testing of textrea </textarea>
$(function() {
$(".txt").focus(function(){
var element = $(this);
var refID = element.attr("refID");
// alert(refID);
$('#txt' + refID).focus (function() {
$('#txt' + refID).animate({
width: 400,
height: 200
}, 1000);
});
$('#txt' + refID).blur(function() {
$('#txt' + refID).animate({
width: 400,
height: 20
}, 1000);
});
});
});
http://jsfiddle.net/Y3rMM/ http://jsfiddle.net/Y3rMM/
CSS... CSS ...
.expand {
height: 1em;
width: 50%;
padding: 3px;
}
HTML... HTML ...
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery... jQuery的...
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
SOmething like this will work. 这样的事情会起作用。
http://jsfiddle.net/PU73y/3/ http://jsfiddle.net/PU73y/3/
you were setting a second focus handlers inside your initial focus handler, so you needed to click again to trigger that handler. 您在初始焦点处理程序中设置了第二个焦点处理程序,因此您需要再次单击以触发该处理程序。 All i did in this fiddle was remove the inner handler:
我在这个小提琴中所做的只是删除了内部处理程序:
$(function() {
$(".txt").focus(function(){
var element = $(this);
var refID = element.attr("refID");
// alert(refID);
$('#txt' + refID).animate({
width: 400,
height: 200
}, 1000);
$('#txt' + refID).blur(function() {
$('#txt' + refID).animate({
width: 400,
height: 20
}, 1000);
});
});
});
This works: http://jsfiddle.net/PU73y/4/ 这有效: http : //jsfiddle.net/PU73y/4/
Your problem was you created the listeners on $('#txt' + refID)
only after the first focus. 您的问题是仅在第一个焦点之后才在
$('#txt' + refID)
上创建侦听器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.