2

onが検出さ<b>れるたびにkeyupaを挿入しようとしています ( のように)。から読み取り、要素にコピーします。#Facebooktextareadiv

    <div  class="new_postAdDescription2" id="new_postAdDescription2" spellcheck='false' contenteditable='true'> </div>  
    <textarea name="description" id="new_postAdDescription" spellcheck='false' 
class="new_postAdDescription" cols="30" rows="10" placeholder="Posto nj&euml; shpallje" >
</textarea>

空白と改行を置き換える方法をご覧ください。私も試してみ&nbsp;ました（ここで、空白の一致を削除すると、すべて正常に機能します！）

$('#new_postAdDescription').keyup(function (e) {
        var str = $('#new_postAdDescription').val();

        str = str.replace(/ /g, '&#160;');
        str = str.replace(/\n/g, '<br/> ');

        str = str.replace(/(&#160;|<br\/> )#([a-zA-Z0-9]+)/g, "$1<b class='highlighterContent'>#$2</b>");

        $('#new_postAdDescription2').html(str);  
    });

// スタイル

<style>
.new_postAdDescription, .new_postAdDescription2{
    position: relative;
    float: left;
    background-color: transparent;
    border: 0;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    outline: 0;
    width: 694px;
    color:#1c1c1c;
    resize: none;
    margin: 10px;
    height: 115px;
    font-size:13px;
    line-height:1.3;
    direction: ltr; 
    word-wrap:break-word;
}

.new_postAdDescription2{
position:absolute;
color:transparent;
word-wrap:break-word;
direction: ltr; 
text-align: left;
}
.highlighterContent{
position:relative;
font-weight:bold;
color:#333;
background-color:#f2f2f2;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

</style>

最高ではありませんが、Chrome では問題なく動作しますが、FF と IE9 では、単語を分割すると、テキストが重なって、トラックが失われます。スクリーンショットを見る

FFと_IE9

ここに画像の説明を入力

中にChrome：

ここに画像の説明を入力

4

1 に答える 1

1

私は正しい答えを見つけました....

新しいJavaScriptは（はるかに単純です）：

$('#new_postAdDescription').keyup(function (e) {
    var str =$('#new_postAdDescription').val();

    str = str.replace(/\n/g, '<br>');
    str = str.replace(/#([a-zA-Z0-9]+)/g, "<b>#$1</b>");

    $('#new_postAdDescription2').html(str);
});

そしてcss：

.new_postAdDescription, .new_postAdDescription2{
    position: relative;
    float: left;
    background-color: transparent;
    border: 0;
    outline: 0;
    width: 694px;
    resize: none;
    margin: 10px;
    height: 115px;
    font-size:13px;
    line-height:1.3;
    direction: ltr;
    color:#1c1c1c;
}

.new_postAdDescription2{
    position:absolute;
    color:transparent;
    white-space: pre-wrap;
}
b{
font-weight:bold;
color:#333;
display: inline-block;
white-space: pre-wrap;
word-wrap:break-word;
direction: ltr; 
text-align: left;
max-width: 100%;
}

空白の追加: プレラップ; 適切な場所でそれを機能させました。

于 2013-06-21T10:07:31.907 に答える