2
我有一個基本上是textarea的評論框。我將cols屬性設置爲113 cols，並且在Firefox中看起來不錯，但不是在Chrome或IE9中。受字體類型影響的Textarea寬度。如何解決這個問題？
然後，我將字體更改爲固定寬度的字體，所有3個瀏覽器正確顯示它。關於它的事情是，它只是醜陋的。
你有什麼想法，爲什麼它只會正確地計算列的寬度在Firefox中，而不是其他人？
謝謝。
這裏的CSS：
#wrap_mid #nav_body .entry_container .comment_new_container .ta_new_comment
{
border: 1px solid #d5d5d5;
border-radius: 3px;
color: #999;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
padding: 3px 4px;
width: 795px;
resize: none;
}
這裏的HTML：
<div class="comment_new_container">
<img src="img/avatar45.png" />
<textarea class="ta_new_comment" cols="113" rows="0">Write a comment...</textarea>
<!-- Float fix -->
<div class="clear"> </div>
</div> <!-- END comment_new_container -->
這裏的JQuery的：
<script type="text/javascript">
$(function(){
$(".ta_new_comment").autoGrow();
});
</script>
這裏的jQuery插件：
/*!
* ----------------------------------------------------------------------------
* "THE BEER-WARE LICENSE" (Revision 42):
* <[email protected]> wrote this file. As long as you retain this notice you
* can do whatever you want with this stuff. If we meet some day, and you think
* this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
* ----------------------------------------------------------------------------
*
* Autogrow Textarea Plugin Version v2.0
* http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
*
* Date: March 13, 2011
*/
jQuery.fn.autoGrow = function(){
return this.each(function(){
// Variables
var colsDefault = this.cols;
var rowsDefault = this.rows;
//Functions
var grow = function() {
growByRef(this);
}
var onFocus = function(obj) {
if ($(this).val() != 'Write a comment...') {
return;
} else {
$(this).parents(".comment_new_container").children("img").show();
//$(this).height(34);
$(this).width(745);
$(this).val('');
}
}
var onBlur = function(obj) {
if ($(this).val().length == 0) {
$(this).parents(".comment_new_container").children("img").hide();
//$(this).height(16);
$(this).width(795);
$(this).val('Write a comment...');
}
}
var growByRef = function(obj) {
var new_comment = '';
if (!obj.shiftKey && obj.keyCode == 13) {
obj.preventDefault();
new_comment += '<div class="comment_container" id="001">';
new_comment += '<a href="#"><i class="comment_delete"> </i></a>';
new_comment += '<img src="img/avatar45.png" />';
new_comment += '<a href="/">Mickey Mouse</a>';
new_comment += '<br/>';
new_comment += '<div class="comment_content">' + $(this).val().replace(/\n/g, '<br />'); + '</div> <!-- End comment_content -->';
new_comment += '<div class="comment_timestamp">13 minutes ago</div> <!-- End comment_timestamp -->';
new_comment += '</div> <!-- End comment_container -->';
$(new_comment).insertBefore($(this).parents(".comment_new_container"));
var comment_total = parseInt($('.social_menu_right li a').children('.meta.comment_total').text(), 10) + 1;
$('.social_menu_right li a').children('.meta.comment_total').text(comment_total);
$(this).val('Write a comment...');
$(this).blur();
growByRef(this);
} else {
var linesCount = 0;
var lines = obj.value.split('\n');
for (var i=lines.length-1; i>=0; --i)
{
linesCount += Math.floor((lines[i].length/colsDefault) + 1);
}
if (linesCount >= rowsDefault) {
obj.rows = linesCount + 1;
} else {
obj.rows = rowsDefault;
}
}
}
var characterWidth = function (obj){
var characterWidth = 0;
var temp1 = 0;
var temp2 = 0;
var tempCols = obj.cols;
obj.cols = 1;
temp1 = obj.offsetWidth;
obj.cols = 2;
temp2 = obj.offsetWidth;
characterWidth = temp2 - temp1;
obj.cols = tempCols;
return characterWidth;
}
// Manipulations
$(this).css("width","795");
$(this).css("height","auto");
$(this).css("overflow","hidden");
this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";
$(this).bind("focus", onFocus);
$(this).bind("blur", onBlur);
$(this).bind("keypress", growByRef);
$(this).bind("keyup", grow);
});
};
cols屬性有點不可思議。您的文本框的寬度根據字體系列和字體大小而變化。改爲使用CSS爲您的textarea設置寬度。 – Jannes 2012-07-20 19:38:04