How to add letter count after a word in javascript
So, I have this textarea in html and I am trying to implement something
like twitter.
Everytime a user types in '#' I want to highlight the word and at the end
of word I want to display a letter count. So for example, " Hi my name is
#user123(7) , whats your name?" I already have the highlighting taken care
of, but I am currently lost on the letter count part. Here is my 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);
}
Here is my 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;
}
Here is my jsfiddle of what i have accomplished.
http://jsfiddle.net/gjqWy/114/
Thank you in advance!
P.S I dont want to use any plugins or Jquery. Just plain Javascript/html/css
No comments:
Post a Comment