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 をあまり知りません。独学で学ぼうとしていますが、この問題が発生しています。助けていただければ幸いです。