js 文本改变提示剩余字数
来源:互联网 发布:炒股高手软件 编辑:程序博客网 时间:2024/05/12 00:00
<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>