所以,我在 html 中有这个 textarea,我正在尝试实现类似 twitter 的东西。
每次用户输入“#”时,我想突出显示该单词,并在单词末尾显示一个字母计数。例如,“嗨,我的名字是 #user123(7),你叫什么名字?” 我已经处理了突出显示,但我目前在字母计数部分迷失了方向。这是我的 HTML
<div id="inputback" class="format"></div>
<textarea id="input" class="format"></textarea>
Javascript
var textarea = document.getElementById("input");
var hashflag = 0 ;
var textlength;
textarea.onkeydown = function(e){
textarea.style.height = "";
textarea.style.height = textarea.scrollHeight + "px";
textlength = textarea.value.length;
var str = textarea.value;
str = str.replace(/(\s)([#]\w*)/g, "$1<b>$2</b>");
$('#inputback').html(str);
}
这是我的 CSS
.format
{
font: 9pt Consolas;
}
#input { border: 1px solid black; background: transparent; z-index: 10; }
#inputback {
color: transparent;
position: absolute;
top: 0px
}
#inputback b
{
color: black;
background-color: #808080;
font-weight: normal;
}
这是我完成的工作的 jsfiddle。 http://jsfiddle.net/gjqWy/115/
先感谢您!
PS 我不想使用任何插件或 Jquery。只是普通的 Javascript/html/css