统计Textarea的输入字符数

HTML代码:

<div class="item-textarea">
    <textarea></textarea>
    <span>还可以输入<i>500</i>个文字</span>
</div>

CSS代码:

.item-textarea{
    position: relative;
}
.item-textarea textarea{
    width: 100%;
    height: 100px;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    border: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.14rem;
}
.item-textarea span{
    display: block;
    position: absolute;
    right: 6px;
    bottom: 7px;
    color: #9a9a9a;
    font-size: 0.12rem;
}
.item-textarea span i{
    color: #55acef;
}

简单看下当前的页面效果:

为了方便,首先引入jQuery文件,这里用到一个匿名的自调函数

(function( ){
    var textArea = $(‘textarea‘);
    var numItem = $(‘i‘);
    var max = numItem.text(); //i标签中的内容,也就是最多可以显示的字符数
    var curLength = textArea.val().length; //当前的字符数

    textArea.attr(‘maxlength‘,max); //设置最大字符数,如果去掉的话,i标签内会出现负数
    numItem.text(max - curLength); //实时更新i标签中的数量
    textArea.on(‘input propertychange‘, function () {
        //$(this) ---> 指代textarea
        numItem.text(max - $(this).val().length);
    });
})()

时间: 2024-11-02 16:14:14

统计Textarea的输入字符数的相关文章

JS(javascript)动态判断输入文本框剩余可输入字符数

一.描述 我们在空间中发表状态,当我们输入一个字符,上面的剩余可输入字符数就会减一,直到输入的字符数达到之前设定的最大数量为止,效果如下图所示: 二.实现方法 首先,我们先确定文本框内的最大可输入长度,其次在输入一个字符抬起键盘的时候对输入文本框中的字符长度进行验证,并在动态显示在剩余可输入字符数中. 三.源代码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="

作业-- 统计文本文件中的字符数、单词数、行数

用AndroidStudio解析统计文本文件中的字符数.单词数.行数. 代码部分: package administrator.mc; import android.os.Environment; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widge

android 中如何限制 EditText 最大输入字符数

方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:android:maxLength="10" 即限制最大输入字符个数为10 方法二: 在代码中使用InputFilter 进行过滤 //editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(20)}); 即限定最大输入字符数为20 [java] view plaincopy public class TextEditActivity exten

限制输入字符数通用方法(汉字占2位,英符占1位)

(待完善补充) checkLimitCharacterLength(itemName, length, parentObj) { //校验字符长度(变量名,限制字符数,变量所属的对象) if (!parentObj) { parentObj = this; } let value = parentObj[itemName]; let valueArray = value.split(''); let _len = 0 for (let i = 0, len = value.length; i <

textarea输入框实时统计输入字符数

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #num { 9 color: red; 10 } 11 </style> 12 </head> 13 14 <body> 15 1

js控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

[Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <textarea name="message" cols="96" rows="5" onKeyDown="textCounter(message,remLen,65);" onKeyUp="textCounter(mess

WordCount--统计输入文件的字符数、行数、单词数(java)--初级功能

码云地址: https://gitee.com/YuRenDaZ/WordCount 个人PSP表格: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划 180 120 · Estimate · 估计这个任务需要多少时间 180 120 Development 开发 580 440 · Analysis · 需求分析 (包括学习新技术) 180 60 · Design Spec · 生成设计文档 40 30 · Design Review · 设计复审 (

统计输入的行数,单词数和字符数

#include<stdio.h> #define IN 1 /*在单词内*/ #define OUT 0 /*在单词外*/ //统计输入的行数,单词数和字符数 int main(){ int c, nl, nw, nc, state; nw=nl=nc=0; state=OUT; while((c=getchar())!=EOF){ nc++; if(c=='\n') nl++; if(c=='\n' || c=='\t' || c==' '){ state=OUT; } else if(s

&lt;08&gt; while循环介绍及基本格式+while循环使用陷阱+统计键盘输入的字符数+

while循环介绍及基本格式(掌握): 循环结构: 当条件满足的时候 ,程序会重复的执行某一个代码段 构成循环结构的条件: 1)循环控制条件 2)循环体 3)让循环控制条件为假的控制 while循环的格式: while(表达式){ 语句块; } 1 #include <stdio.h> 2 3 void test1(){ 4 5 int i=1; 6 7 // 1)循环控制条件 8 while(i<=1000){ 9 10 //2)循环体 11 printf("第%d次说:我爱