5

文字制限を超えてテキストを強調表示するテキストエリアを作成したい (Twitter のように)。

私の試みはここにあります：http://jsfiddle.net/X7d8H/1/

HTML

<div class="wrapper">
    <div class="highlighter" id="overflowText"></div>
    <textarea id="textarea1" maxlength="200"></textarea>
</div>
<div id="counter">Letters remaining: 140</div>
<input type="Button" value="Done" id="doneButton"></input>

CSS

* {
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: normal;
}
.wrapper {
    position: relative;
    width: 400px;
    height: 100px;
}
.wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    resize: none;
    white-space: pre-wrap;          /* CSS3 */   
    white-space: -moz-pre-wrap;     /* Firefox */    
    white-space: -pre-wrap;         /* Opera below 7 */   
    white-space: -o-pre-wrap;       /* Opera 7 */    
    word-wrap: break-word;          /* IE */
}
.highlighter {
    background-color: #eee;
    color: #f0f;
}
.highlight {
    background-color: #fd8;
    color: #f0f;
}
textarea {
    background-color: transparent;
    color:#000;
}

ジャバスクリプト

function limitTextSize(e) {
    var max = 140
    var txt = $("#textarea1").val();
    var left = txt.substring(0, max);
    var right = txt.substring(max);
    var html = left + '<span class="highlight">' + right + "</span>";
    $("#overflowText").html(html);
    $("#counter").html("Letters remaining: " + (max - txt.length));
    $("#doneButton").attr("disabled", txt.length > max);
}

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}
$(document).ready(function() {
    $("#textarea1").bind('input propertychange', limitTextSize)
    maxLength($("#textarea1"));
});

JQueryを使用しています

Firefox以外では動作します。バグを表示するには、これをテキストエリアに貼り付けます。

fjdf hkj hfj hdfkjsd hfllll sdfl sdlflldsf lsdlf flsdlf lsdf lsdf llsdfls dlfs ldflsd f

これにより、div と textarea の間のフォーマットの小さな違いが明らかになります (Firefox のみ)。ワードラップの違いがわかるように、「隠し」テキストを紫色にしました。

私はここを見てきました: How to force Firefox to render textarea padding as in a div?

そしてここ：テキストエリアと同じようにdivでテキストをラップする

そしてここ：Firefoxのテキストエリアのサイズ変更のバグ？

しかし、それらのどれも当てはまらないようです...

contenteditable div にしようと考えましたが、変更イベントを取得するのは地雷原のように見えます。

ここで誰かがこれを成功させましたか？

4

3 に答える 3

0

これは、使用されているフォント サイズに関係しています。使用される単位はpoint (pt)であるため、計算されたサイズはブラウザーで大きく異なり、誤った行の折り返しが発生します。

代わりに次のスタイルを試してください。

* {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
}

body {
    font-size: 1em;
}

JSFiddle

font-size の変更に対応するために、コンテナーのサイズを変更する必要がある場合があります。

于 2013-05-13T07:09:04.803 に答える