jQuery textarea显示限制输入字符

所属分类:输入-丰富的输入

 26766  337  查看评论 (7)
分享到微信朋友圈
X
jQuery textarea显示限制输入字符 ie兼容6

html:onkeyup,onkeydown调用textAreaChange

<textarea class='form-control' name='test' onkeyup='textAreaChange(this)' onkeydown='textAreaChange(this)' rows='5'></textarea>
<div class='text-right'>
    <em style='color:red'>200</em>/<span>200</span>
</div>

js

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
//显示限制输入字符method
function textAreaChange(obj){
    var $this = $(obj);
    var count_total = $this.next().children('span').text();
    var count_input = $this.next().children('em');
    var area_val = $this.val();
    if(area_val.len()>count_total){
        area_val = autoAddEllipsis(area_val,count_total);//根据字节截图内容
        $this.val(area_val);
        count_input.text(0);//显示可输入数
    }else{
        count_input.text(count_total - area_val.len());//显示可输入数
    }
相关插件-丰富的输入

jQuery多功能网页键盘插件

jQuery网页键盘插件,可移动,可输入汉字的多功能键盘
  丰富的输入
 17522  225

EmojiOne表情符号所见即所得的文本编辑器

emojionearea.js是一款可集成EmojiOne表情符号的所见即所得的jQuery文本编辑器插件。emojionearea.js允许你将任何的HTML元素转换为WYSIWYG文本编辑器,并且它能够在编辑器中使用Emojione图标。
  丰富的输入
 43729  343

移动端全屏画板

手机全屏画板,支持多种颜色,绘制完可下载为图片,适合小游戏开发。(例如:画出印象中的你)
  丰富的输入
 41060  345

vue健康问卷调查(原创)

vue实现移动端问卷调查,健康自测等等
  丰富的输入
 31047  339

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    LLH 0
    2018/12/23 0:04:34
    //得到字符串的字节长度
    String.prototype.len = function() {
        //不区分 半角 全角
        return this.length;
        //区分 半角 全角
        return this.replace(/[^\x00-\xff]/g, "xx").length;
    };
    //不区分 半角 全角
    if (_strLen <= pLen / 1) {
        _cutString = pStr;
        _ret = true;
    }
    //区分 半角 全角
    if (_strLen <= pLen / 2) {
        _cutString = pStr;
        _ret = true;
    }
    //不区分 半角 全角
    if (isFull(pStr.charAt(i))) {
        _lenCount += 1;
    }
    //区分 半角 全角
    // if (isFull(pStr.charAt(i))){_lenCount += 2;}
        LLH0
        2018/12/23 0:05:16
        如果需要不区分 半角 全角 修改以上三处即可
    回复
    丁峰 0
    2018/6/29 10:48:54
    鼠标粘贴不调用 回复
    百转千回 0
    2017/12/1 11:42:20
    日出 0
    2017/10/23 15:23:24
    只支持键盘的操作来统计。。。。。 回复
    WckY 0
    2017/9/21 11:15:25

    建议楼主下次上传作品时 最好在移动端里测试下 或者说 这类效果 最好写成兼容PC端及移动端 刚才我在iphone6S 微信里 safari等里测试 发现复制粘贴时 计数直接失效  不过看了你的源码 注释写的很清楚 以及对表情的处理 很棒 一个表情占四个字节 更甚者 希望楼主修改移动端复制粘贴bug 这在移动端是很常见的功能

    回复
    大自然的搬砖工 0
    2017/9/21 8:38:03

    onkeyup事件,鼠标复制粘贴则事件不调用

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复