<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>限制文件字数字</title>
</head>
<body>
<span class="span">备注信息</br><span id="stay" style="display: none"> 您还可以输入:<span id="txtCount"></span>个字符的描述信息</span></span>
         </br><input id="Remark_information" name="Remark_information" type="text">

         <script>
    var lim=new limit();
    lim.txtNote=document.getElementById("Remark_information");
    lim.txtLimit=document.getElementById("txtCount");
    lim.limitCount=80;
    lim.init();
    function limit(){
        var txtNote;//文本框
        var txtLimit;//提示字数的input
        var limitCount;//限制的字数
        var txtlength;//到达限制时，字符串的长度
        this.init=function(){
            txtNote=this.txtNote;
            txtLimit=this.txtLimit;
            limitCount=this.limitCount;
            txtNote.oninput=function(){wordsLimit()};txtNote.oninput=function(){wordsLimit()};
            txtLimit.innerText=limitCount;
        };
        function wordsLimit(){
            var noteCount=txtNote.value.length;
            var InPut=document.getElementById("Remark_information").value.length;
            if(InPut<1){
                document.getElementById("stay").style.display="none";
                return
            }
            if(InPut>=1){
                document.getElementById("stay").style.display="inline";
                document.getElementById("stay").style.color="green";
            }
            if(InPut>70){
                document.getElementById("stay").style.color="red";
            }
            if(noteCount>limitCount){
                txtNote.value=txtNote.value.substring(0,limitCount);
                txtLimit.innerText=0;
            }else{
                txtLimit.innerText=limitCount-noteCount;
            }
            txtlength=txtNote.value.length;//记录每次输入后的长度
        }
    }
</script>
</body>

来自：http://www.cnblogs.com/zhujiasheng/p/6113983.html

　　

JS 限制input框的输入字数，并提示可输入字数的更多相关文章

  1. js控制input框输入数字时，累计求和

    input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...

  2. js 动态控制 input 框 的只读属性

    需求: 当下拉框的值为06即Voucher时, 文本框才可输入, 其他情况均为置灰不可录入状态. 问题: 设置input框的只读属性写成了readonly="true" 尼玛,坑死 ...

  3. php页面输出时，js设置input框的选中值

    /* 设置表单的值 */ function setValue(name, value) { var first = name.substr(0, 1), input, i = 0, val; if ( ...

  4. js控制 input框中输入数字时，累计求和

    $('.cc input').bind('input propertychange', function(){ var total = 0; $("input").each(fun ...

  5. js控制input框只能输入数字和一位小数点和小数点后面两位小数

    <script language="JavaScript" type="text/javascript"> function clearNoNum( ...

  6. Js限制Input框只能输入数字

    <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" /> <input ...

  7. js复制input 框中的值

    function copy(){ var Url2=document.getElementById("copyValue"); Url2.select(); document.ex ...

  8. js对input框的可编辑属性设置

    添加disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled& ...

  9. 关于input框仿百度/google自动提示的方法

    引入jquery-autocomplete文件 链接:https://pan.baidu.com/s/1hW0XBYH8ZgJgMSY1Ce6Pig 密码:tv5b $(function() { $( ...

随机推荐

  1. 构造定律（constructal law）-构造定律作为第二个时间箭头，将和热力学第二定律一道将宇宙推向无序。

    优化系统结构,使信息和物质流在结构内的流动更畅通. 构造定律(constructal law) 由Adrian Bejan于1995创立的构造定律(constructal law):   For a ...

  2. Pycharm 设置

    1:显示行号 打上对勾OK 2:设置作者 & 文件编码 3:选择切换Python的版本

  3. CentOS6.5 静默安装Oracle 11g过程中提示：Exception in thread “main” java.lang.NoClassDefFoundError

    原来是系统中设置了DISPLAY环境变量,执行: [oracle@qa26 database]$ ./runInstaller  -silent -responseFile /usr/local/or ...

  4. Windows环境下制作MACOS X U盘安装盘

    前两天在朋友的MAC BOOK AIR上胡乱操作时把原来安装好的双系统搞坏了,一不小心又把硬盘格式化了,导致MAC系统也没了,于是只能重新安装MACOS系统,并根据网友提供的教程,在MACOS安装OK ...

  5. 机器学习PAI快速入门

    什么是机器学习? 机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行为,以 ...

  6. BZOJ 1264: [AHOI2006]基因匹配Match DP_树状数组_LCS转LIS

    由于有重复数字,我们以一个序列为基准,另一个序列以第一个序列每个数所在下标为这个序列每个数对应的值. 注意的是,拆值的时候按照在第一个序列中的位置从大到小排,强制只能选一个. 最后跑一边最长上升子序列 ...

  7. 解决python执行cmd命令出现"XXX不是内部命令"的问题

    由于最近呢,比较得空.无意中浏览到新闻XXX事件(你懂的).后面直接去百度云搜索下载,果然有资源. 怀着迫不及待的心情去打开,解压.我艹,竟然有解压密码.万恶的资本主义啊.作为程序员的我,怎么可能为这 ...

  8. yum 安装nginx(配置开机启动)

    yum install -y nginx 通过yum安装的时候提示下面的错误 [root@localhost yum.repos.d]# yum install nginx 已加载插件:fastest ...

  9. js提示是否删除

    第一种: <a href="javascript:if(confirm('确认删除吗?'))window.location='del.asp'">删除</a> ...

  10. Python编码显示中文乱码

    爬虫时出现问题: import requests data=requests.get('http://roll.news.sina.com.cn/')print(data.text) 输出结果中文显示 ...