[英]Resizing font in textarea without increasing textarea size
I was messing around with some Jquery to have a slider control the size of font in a text area and used something like: 我正在搞乱一些Jquery,以便在文本区域中使用滑块控制字体的大小,并使用类似于:
...
slide: function( event, ui ) {
$('#t_area').css("font-size", ui.value + "px");
}
....
within the function to control the slider. 在功能内控制滑块。 I noticed that even when I didn't have text in the textarea, it still increased in size when I moved the slider (and also grew too large when there was text in it.) So I was wondering if there was a way to increase the size of the text without having that side effect?
我注意到即使我在textarea中没有文本,当我移动滑块时它的大小仍然增加(当它有文本时也变得太大了。)所以我想知道是否有办法增加没有副作用的文字大小?
Thanks 谢谢
CSS:
textarea { max-width:300px;max-height:300px; }
You could just use css for this. 你可以使用css。
textarea{
width: 100px;
height: 100px;
}
Set dimensions on the textarea
. 在
textarea
上设置尺寸。 Demo: http://jsfiddle.net/6qZAh/ 演示: http : //jsfiddle.net/6qZAh/
textarea {
width: 100px;
height: 50px;
}
Without explicit dimensions, the size is based on the rows/cols of the textarea
. 如果没有明确的维度,则大小基于
textarea
的行/列。 Even when not those values are not explicitly set, the user agent uses a default. 即使没有显式设置这些值,用户代理也会使用默认值。
Demo: http://jsfiddle.net/6qZAh/1/ 演示: http : //jsfiddle.net/6qZAh/1/
$("textarea").on("click",function(){
var t = $(this);
alert(t.prop("rows"));
alert(t.prop("cols"));
});
In Chrome and IE9, this shows me "2" and "20". 在Chrome和IE9中,这显示“2”和“20”。
This appears to be spec-driven (emphasis mine): 这似乎是规范驱动的 (强调我的):
Rows 行
If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value;
如果将用于解析非负整数的规则应用于属性的值会导致数字大于零,那么元素的字符高度就是该值; otherwise, it is 2.
否则, 它是2。
Cols 列数
If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value;
如果将用于解析非负整数的规则应用于属性的值会导致数字大于零,那么元素的字符宽度就是该值; otherwise, it is 20.
否则, 它是20。
if($('#t_area').text() != ""){
$('#t_area').css("font-size", ui.value + "px");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.