<!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. React+Antd遇到的坑

    第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件, ...

  2. C#获取硬盘序列号

    //创建ManagementObjectSearcher对象 ManagementObjectSearcher searcher = new ManagementObjectSearcher(&quo ...

  3. java并发的一些杂乱小结

    1.java语言本身就提供了多线程机制,这样即使在单任务的操作系统上也可以实现多线程,这也是java语言本身"编写一次,到处运行"的特性. 2.并发要解决的问题本质上是:多个线程同 ...

  4. 功分器 power divider

    之前讲过有了解过耦合器,知道耦合器是矢网测量当中的关键设备 coupler //------------------------------------------------------------ ...

  5. 什么时候用created，什么时候用mounted

    created 在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调.然而,挂载阶段还没开始,$e ...

  6. Mysql笔记2-----重要小点

    1.逻辑删除:

  7. vue中使用base64进行加解密

    vue进行Base64加解密 背景 项目中需要对特殊字符进行处理,避免json和数据库的特殊字符(""等)冲突,刚好学了信息安全,干脆整个加解密,wkk.. 使用步骤 打开dos, ...

  8. Win 10安装mysql以及常见问题总结

    一.mysql免安装版本配置1.从官网下载安装包,解压后,在电脑属性环境变量的path中配置bin的路径 2.配置my.ini [mysql] # 设置mysql客户端默认字符集 default-ch ...

  9. WEBGL学习【九】立方体贴不同的纹理

    <html> <!--开始实现一个三维街景的渲染效果--> <head> <meta http-equiv="Content-Type" ...

  10. Project Euler 2 Even Fibonacci numbers

    题意:斐波那契数列中的每一项都是前两项的和.由1和2开始生成的斐波那契数列前10项为:1, 2, 3, 5, 8, 13, 21, 34, 55, 89, -考虑该斐波那契数列中不超过四百万的项,求其 ...