<!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. 函数反抖 debounce

    debounce :如果在一段延时内又触发了事件,则重新开始延时.即每次触发事件,只触发最近一次的事件. const debounce = (fn, duration) => { let tim ...

  2. Jquery插件：提示框

    在实际项目中,很容易有这种需求:当某个操作成功或失败,需要给用户一个提示.当然最简单的做法是调用alert()方法弹窗.但alert()属于JavaScript中BOM部分,每个浏览器的样式不太一样, ...

  3. String、Stringbuffer、StringBuffer回顾

    前言: 久了没用到,一下子就忘了..,参考文章:https://www.cnblogs.com/su-feng/p/6659064.html.https://baijiahao.baidu.com/s ...

  4. 路飞学城Python-Day141

    什么是爬虫    爬虫就是通过编写程序模拟浏览器上网,然后让其去互联网上抓取数据的过程. 爬虫的目的就是为了模拟浏览器进行网络数据访问               抓取数据的两种方式          ...

  5. js脚本捕获页面 GET 方式请求的参数？其实直接使用 window.location.search 获得

    js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得

  6. MaterialDesign动画

    一.概述 MaterialDesign设计理念 MaterialDesign动画 二.实例讲解 (1)Touch Feedback (2)Reveal Effect (3)Activity Trans ...

  7. Python数据结构1-----基本数据结构和collections系列

    1.基本数据结构 整型.浮点型.字符串.元祖.列表.字典.集合 2.高级数据结构 (collections模块) (1)计数器(counter):对字典的补充,用于追踪值的出现次数. [具备字典所有的 ...

  8. Node笔记(2)

    写一个可以生成多层级文件夹的函数 const fs = require('fs'); const path = require('path'); function mkdirs (pathname,c ...

  9. Scalable Web Architecture and Distributed Systems

    转自:http://aosabook.org/en/distsys.html Scalable Web Architecture and Distributed Systems Kate Matsud ...

  10. CSS3 创建简单的网页动画 – 实现弹跳球动

    基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将 ...