zoukankan      html  css  js  c++  java
  • js控制输入字数

    效果图

    360软件小助手截图20141015203826

    //HTML
    
            <div class="post_form">
                <span class="left">和大家分享一点新鲜事吧?</span>
                <span class="right">可以输入<strong>140</strong>个字</span>
                <textarea class="post_textarea"></textarea>
                <input type="button" class="post_button" value="发布" />
            </div>
    //CSS
    
    #main .left {
        float:left;
        color:#666;
        font-size:14px;
        font-weight:bold;
    }
    #main .right {
        float:right;
        color:#ccc;
        font-size:13px;
    }
    #main .right strong {
        font-family:Constantia,Georgia;
        color:#049;
        font-size:22px;
        padding:0 5px;
        position:relative;
        top:-2px;
    }
    #main .right strong.red {
        color:red;
    }
    #main .post_textarea {
        632px;
        height:80px;
        border:1px solid #ddd;
        background:#fff;
        resize:none;
        padding:8px;
        color:#666;
        font-size:16px;
        box-shadow:1px 1px 1px #dcdcdc inset;
    }
    #main .post_button {
        float:right;
        width: 90px;
        font-size:14px;
        font-weight:bold;
        margin-top:5px;
    }
    //JS

    //字数计算
    //计算方法为 中文字算一个字,英文,数组,算半个字
      $('.post_textarea').on('keyup',check_num);
      $('.post_textarea').on('focus',function() {
        setTimeout(function() {
          check_num();
        },50);
      });
      $('.post_textarea').on('blur',check_num);

    function check_num() {
      var total = 280;//140*2
      var temp = 0;
      var result_num = 140;
      var length = $('.post_textarea').val().length;
      if(length > 0) {
        for(var i=0;i<length;i++) {
          if($('.post_textarea').val().charCodeAt(i) > 255)
            temp +=2;
          else
            temp++;
        }
        result_num = parseInt((total - temp) / 2);
      }
      if(result_num >= 0)
        $('span.right').html('可以输入<strong>'+result_num+'</strong>个字');
      else
        $('span.right').html('已经超过了<strong class="red">'+result_num+'</strong>个字');
    }

     
  • 相关阅读:
    android:text 文字阴影设置
    android 布局的android:padding 和android:margin的区别
    sqlite的Query方法操作和参数详解
    SQL Server中如何让SQL语句对字符串大小写敏感
    android SQLite数据库(转)
    JAVA中内存分配的问题
    testview属性之详解
    在linux环境下安装VMtools(成功)
    关于配置文件
    C#的几种“属性”概念理解
  • 原文地址:https://www.cnblogs.com/lxdd/p/4027280.html
Copyright © 2011-2022 走看看