js 文本改变提示剩余字数

<script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var op = oDiv.getElementsByTagName('p')[0];
            var oT = oDiv.getElementsByTagName('textarea')[0];
            var oA = oDiv.getElementsByTagName('input')[0];
            var oBtn = true;
            //var ie = ! -[1, ]; //判断是否是ie -[1,]为NaN 即false  --ie9+不适合
            var timer;
            var iNum = 0;
            oT.onfocus = function () {
                if (oBtn) {
                    op.innerHTML = '你还可以输入<span>100</span>字';
                    oBtn = false;
                }
            }
            oT.onblur = function () {
                if (oT.value == '') {
                    op.innerHTML = '1234567';
                    oBtn = true;
                }
            }
            if (window.navigator.userAgent.indexOf("MSIE") >= 0) {
                oT.onpropertychange = tochange; //ie
            } else {
                oT.oninput = tochange;
            }
            //文本改变调用函数
            function tochange() {
                var num = Math.ceil(getLength(oT.value) / 2);
                var oSpan = oDiv.getElementsByTagName('span')[0];
                if (oSpan) {
                    if (num < 100) {
                        oSpan.innerHTML = 100 - num;
                        oSpan.style.color = '';
                    } else {
                        oSpan.innerHTML = num - 100;
                        oSpan.style.color = 'red';
                    }
                }
            }
            //获取文本长度 字母,半角数字每两个算是一个字
            function getLength(str) {
                return String(str).replace(/[^\x00-\xff]/g, 'aa').length;//将每个全角和汉字转换成两个字节的字母
            }

            oA.onclick = function () {
                if (oT.value == '' || oT.value.length > 100) {
                    clearInterval(timer); //防止用户一直点击
                    //超出文本范围或者未填写 文本框样式
                    timer = setInterval(function () {
                        if (iNum == 5) {
                            clearInterval(timer);
                            iNum = 0;
                        } else {
                            iNum++;
                        }
                        if (iNum % 2) { //为1
                            oT.style.background = 'red';
                        } else {
                            oT.style.background = '';
                        }
                    }, 100);
                } else {
                    alert('ok');
                }
            }
        }
    </script>

 <div id="div1">
        <p>1234567</p>
        <textarea></textarea>
        <input type="button" value="测试" />
    </div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值