一个计算字符的微博框

1、首先，要先勾勒出html，我们需要一个wrapper来包含微博框和显示文字；微博框上面显示字数，下面显示超过的字数。

<div class=wrapper>
    还可以输入<span></span>个字符
<form>
    <textarea class=love name=love onkeyup="textCount(this.form.love, document.getElementsByTagName('span'), 5);" onkeydown="textCount(this.form.love, document.getElementsByTagName('span'), 5);">

    </textarea>
</form>
<p>超出了<span></span>个字符</p>
</div>

 

2、写出重点勾勒的CSS，当超过字数时，微博框变红

.wrapper {
    width: 500px;
    height: 300px;
    text-align: right;
    line-height: 2em;
}
.love {
    box-shadow: inset 0 0 4px hsla(240, 50%, 60%, .5);
    text-align: left;
    width: 320px;
    height: 100px;
}
.add {
    color: grey;
}
p {
    display: none;
    color: red;
}

 

3、写出行为，显示字数，显示超过的字数，事件是onKeyup和onKeydown

var over = document.getElementsByTagName('p')[0];
    var textCount = function(field, countField, maxLimit) {
        if (field.value.length > maxLimit) {
            field.value.substring(0, maxLimit);
            field.style.border = "2px solid red";
            over.style.display = 'block';
            countField[1].innerText = field.value.length - maxLimit;
        } else {
      field.style.border ='';
            over.style.display = 'none';
            countField[0].innerText = maxLimit - field.value.length;
    }
}

 

还有点缺陷，focus的时候，光标不一定停在左上角。。。