1

Facebook のような入力テキストをテキスト領域で実装しようとしています (つまり、Facebook のハッシュタグ ハイライター)。これを行うために、この質問に従っています。

この質問と同じcssを持っていないため、いくつかの問題が発生しています。この問題の解決を手伝ってくれるかどうか知りたいです。ここに私が話している「奇妙さ」があります：

はい、一部です

これが私のコードです：

// HTML
<div class="overlap" contenteditable='true'> </div>
<input type='text' class='medium-input' autocomplete='off'/> 

// JS
$('.medium-input').keyup(function (e) {
    var str =$('.medium-input').val();
    str = str.replace(/\n/g, '<br>');
    str = str.replace(/#([a-zA-Z0-9]+)/g, "<b>#$1</b>");
    $('.overlap').html(str);
});

// CSS
.medium-input, .overlap{
    width: 560px;
    position: relative;
    float: left;
    background-color: transparent;
    outline: 0;
    resize: none;
    direction: ltr;
}

.overlap{
    position:absolute;
    color:transparent;
    white-space: pre-wrap;
    max-width: 100%;
    height: 30px;
    padding: 7px 8px;
    font-family: sans-serif;
}

.overlap 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%;
}

ご覧のとおり、私は CSS と JS をあまり知りません。独学で学ぼうとしていますが、この問題が発生しています。助けていただければ幸いです。

4

1 に答える 1

1

アップデート

（コメントを参照）

最も簡単な解決策は、textarea(with no-resize) を使用することです。次に、少しの javascript で自動展開します。

Updated Fiddle/ Javascript:

$(function () {
    var overlap = $('.overlap'),
        input = $('.medium-input');
    input.on('input', function () {
        overlap.html(this.value.replace(/#([a-zA-Z0-9]+)/g, "<b>#$1</b>"));
        input.height(overlap.height());
    });
});


太字のテキストを扱うのはちょっと複雑です。それはより多くのスペースを占有し、その「奇妙さ」を生み出します。
text-shadow を使用して、太字のテキストをシミュレートできます。

jsFiddle Demo/ CSS: 

.medium-input, .overlap {
    position: relative;
    width: 560px;
    padding: 5px;
    background-color: transparent;
    border: 1px solid #999;
    outline: 0;
    font-size: 13px;
    font-family: sans-serif;
    word-spacing: 2px;
    color: #333;
    margin: 0;
}
.overlap {
    position: absolute;
    color: transparent;
    border: 1px solid transparent;
}
.overlap b {
    font-weight: normal;
    text-shadow: -1px 0 0 #666;
}

または、別のスタイリング方法を使用することもできます。

jsFiddle Demo/ CSS: 

.medium-input, .overlap {
    position: relative;
    width: 560px;
    padding: 5px;
    background-color: transparent;
    border: 1px solid #999;
    outline: 0;
    font-size: 13px;
    font-family: sans-serif;
    word-spacing: 2px;
    color: #333;
    margin: 0;
}
.overlap {
    position: absolute;
    color: transparent;
    border: 1px solid transparent;
}
.overlap b {
    font-weight: normal;
    background-color: #dedede;
    padding: 0 3px;
    margin: 0 -3px 0 -3px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #999;
}
于 2013-09-08T09:51:36.863 に答える