码迷,mamicode.com
首页 > Web开发 > 详细

微博输入相关js 代码

时间:2015-04-29 23:04:05      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

<!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{ width:400px; margin:20px auto;}
#div1 p{ float:right; margin:0;}
#div1 textarea{ width:400px; height:100px;}
#div1 a{ width: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>

 

微博输入相关js 代码

标签:

原文地址:http://www.cnblogs.com/xinlinux/p/4467593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!