<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>微博发布</title> <style> body{ font-size:12px;} #div1{ 400px; margin:20px auto;} #div1 p{ float:right; margin:0;} #div1 textarea{ 400px; height:100px;} #div1 a{ 50px; height:30px; font-size:16px; line-height:30px; text-align:center; float:right; background:#00FF00; color:#FFFFFF;} #div1 a.dis{ background:#CCCCCC; color:#666666;} </style> <script> //onchange : 当光标消失的时候，只能触发一次 //ie : onpropertychange : 输入连续触发 //标准：oninput : 也是连续触发 window.onload = function(){ var OT = document.getElementsByTagName('textarea')[0]; var Ospan = document.getElementsByTagName('span')[0]; var Oa = document.getElementsByTagName('a')[0]; var str = null; if(!+[1,]){ // 判断是不是ie 浏览器 OT.onpropertychange = ontext_cli; } else { OT.oninput = ontext_cli; } function ontext_cli(){ if(OT.value == ''|| OT.value.length > 140){ Oa.className = 'dis'; }else{ Oa.className = ''; } var num = Math.ceil(getLength(OT.value)/2); if(!Ospan){ return } if(num<=140){ Ospan.innerHTML = 140 - num; Ospan.style.color = ''; } else{ Ospan.innerHTML = num - 140; Ospan.style.color = 'red'; } } function getLength(str){ return String(str).replace(/[^x00-xff]/g,'aa').length; } // OT.onfocus = function(){ Ospan.innerHTML = '140'; } OT.onblur = function(){ Ospan.innerHTML = ''; } } </script> </head> <body> <div id="div1"> <p>《新浪微博社区公约(征求意见稿)》意见征求</p><span></span> <textarea></textarea> <a class="dis" href="javascript:;">发布</a> </div> </body> </html>