0

textarea（固定サイズ）があり、テキストが入力され、それに合わせてサイズが変更されます（フォントが変更されます）。
以下のコードはChrome、Firefoxなどで正常に動作しますが、IE（バージョン7/8/9、これも必要です）では動作しません。
非IEでは、テキストのサイズが変更され、テキストにうまく収まりますが、IEでは、テキストエリアの各行の間に大きなギャップがあります。
行の高さを設定してみましたが、うまくいかないようです。フォントの高さを調整することを読みました。これは、各行をスパンで折り返し、負の上部マージンを設定することを意味します。
どんなアイデアでも大歓迎です。

コードサンプル;

html

<span id="inner-text">
        <textarea readonly="readonly" 
            cols="10" 
            rows="5" 
            class="messagetext" 
            style="width:400px; border:none;height:100px;overflow-y:hidden; resize:none;color: #D31245;"
            >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15</textarea>
</span><span id="temp" style="visibility:hidden"></span>

JS

$(function() {
    var while_counter = 1;
    var txt = $('textarea.messagetext');
    var font_size = txt.css('font-size').replace(/\D/g,'');
    var scHeight = txt.get(0).scrollHeight;
    var txtHeight = txt.height();
    while ( scHeight > (txtHeight+10) ) {
        font_size = (font_size - 1);
        txtHeight = (txtHeight + 15);
        while_counter = while_counter + 1;
    }

    var lines = txt.val().split('\n');
    var total_lines = lines.length;
    var span_width = $('#inner-text').width() - 5;
    var temp_span = $('#temp');
    // now calculate line wraps
    $.each(lines, function(){
        // temp write to hidden span
        temp_span.html(String(this));
        // check width
        if (temp_span.width() > 400) {
            total_lines = total_lines + 1;
        }
    });
    txt.css('font-size', font_size+'px');
    txt.height( (total_lines * font_size) + (total_lines * 1.14) + 10);
});
4

1 に答える 1

0

以下のコードを1つのhtmlファイルにコピーし、IEでチェックインします

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
<script  type="text/javascript">
$(document).ready(function() {
alert('hi');
var while_counter = 1;
var txt = $('textarea.messagetext');
var font_size = txt.css('font-size').replace(/\D/g,'');
var scHeight = txt.get(0).scrollHeight;
var txtHeight = $(txt).height();
while ( scHeight > (txtHeight+10) ) {
    font_size = (font_size - 1);
    txtHeight = (txtHeight + 15);
    while_counter = while_counter + 1;
}

var lines = txt.val().split('\n');
var total_lines = lines.length;
var span_width = $('#inner-text').width() - 5;
var temp_span = $('#temp');
// now calculate line wraps
$.each(lines, function(){
    // temp write to hidden span
    temp_span.html(String(this));
    // check width
    if (temp_span.width() > 400) {
        total_lines = total_lines + 1;
    }
});
$(txt).css('font-size', font_size+'px');
$(txt).innerHeight( (total_lines * font_size) + (total_lines * 1.14) + 10);
});
</script>
</head>
<body>
<span id="inner-text">
    <textarea readonly="readonly" 
        cols="10" 
        rows="5" 
        class="messagetext" 
        style="width:400px; border:none;height:100px;overflow:hidden;resize:none;color: #D31245;"
        >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15</textarea>
</span><span id="temp" style="visibility:hidden"></span>
</body>
</html>
于 2012-11-08T10:08:29.247 に答える