我正在尝试插入 <b>
每当 keyup
, 一个 #
被检测到(如 Facebook
)。我从 textarea
读到, 并复制到 div
元素。
<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ë shpallje" >
</textarea>
请看我如何替换空格和新行。我试过
以及(顺便说一下,如果我删除空格匹配,一切正常!)
$('#new_postAdDescription').keyup(function (e) {
var str = $('#new_postAdDescription').val();
str = str.replace(/ /g, ' ');
str = str.replace(/\n/g, '<br/> ');
str = str.replace(/( |<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
中:
最佳答案
我确实找到了正确答案....
新的 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%;
}
添加空白:预包装;在正确的地方让它发挥作用。
关于jquery - facebook 喜欢标签 - word-wrap :break-word; doesnt work on FF and IE9+,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17215976/