圍脖登入框

關注點：
onchange事件：光標消失時觸發1次
onpropertychange事件：連續觸發，IE下使用
oninput事件：連續觸發，現代下使用
判斷ie簡短方法：

var ie = !-[1,] //IE9已修復

推薦：

if(!window.VBArray){
    alert('Not IE')
}
else{
    alert('IE')
}

閃動背景：開定時器，var iNum = 0; iNum++
單字節變雙字節[計數]
return String(str).replace(/¹/g, 'aa').length;

簡陋佈局：

<div id="box">
    <p>《新浪圍脖社區公約徵求意見》意見徵求</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <a class="dis" href="javascript:;">發布</a>
</div>

window.onload = function () {
    var box = document.getElementById('box');
    var p = box.getElementsByTagName('p')[0];
    var t = box.getElementsByTagName('textarea')[0];
    var a = box.getElementsByTagName('a')[0];
    var onoff = true;//開關焦點進來離開
    var ie = !-[1,];//簡短判斷ie
    var timer = null;//背景閃動定義
    var iNum = 0;//背景閃動定義
    t.onfocus = function () {
        if (onoff) {
            p.innerHTML = '打擊虛假信息，建設文明圍脖，還可輸入<span>140</span>字'
            onoff = false;
        }
    };
    t.onblur = function () {
        if (t.value == '') {
            p.innerHTML = '《新浪圍脖社區公約徵求意見》意見徵求'
            onoff = true;
        }
    }
    if (ie) {
        t.onpropertychange = toChange;
    }
    else {
        t.oninput = toChange;
    }
    function toChange() {
        var num = Math.ceil(getLength(t.value) / 2);//找到字數
        var span = box.getElementsByTagName('span')[0]
        if (num < 140) {
            span.innerHTML = 140 - num;
        }
        else {
            span.innerHTML = num - 140;
            span.style.color = 'red'
        }
        if (t.value == '' || num > 140) {
            a.className = 'dis'
        }
        else {
            a.className = ''
        }
    }
    a.onclick = function () {
        if (this.className == 'dis') {
            //閃動，定時器運動1s
            clearInterval(timer)
            timer = setInterval(function () {
                if (iNum == 4) { //走兩輸即可
                    clearInterval(timer)
                    iNum = 0;
                }
                else {
                    iNum++;
                }
                if (iNum % 2) { //1
                    t.style.background = 'rgb(255, 215, 215)'
                }
                else { //0
                    t.style.background = ''
                }
            }, 100)
        }
        else {
            alert('發布成功')
        }
    }
    function getLength(str) { //判斷單字節，0-255 使用 x = xx 記2字節
        return String(str).replace(/[^\x00-\xff]/g, 'aa').length; //aa轉為2字節
    }
}

body{font-size:12px}#box{width:400px;margin:20px auto}#box textarea{width:400px;height:100px;resize:none;overflow:hidden}#box p{float:right}#box a{width:80px;height:30px;font-size:16px;line-height:30px;text-align:center;float:right;background:#049E04;color:#fff;text-decoration:none;margin-right:-6px;margin-top:10px}#box a.dis{background:#ccc;color:#666}

運行