js 实现textarea输入字数提示

一、先看效果图

效果如图,当输入文字的时候,提示区域动态的显示已输入的字数和最大输入的字数。非常常用的小功能。
二、知识点
知识点比较简单,为了兼容性好些,我多用了几个事件input、propertychange、paste、keyup。现在好多用vue等框架写,我暂时先用jQuery写了,原因是读者比较好理解,需要其他方式也便于修改,高手估计也不用看这些东西啦哈哈哈。
三、上代码。
我当初学习的时候就希望多看demo,可我找到的资料往往是讲一些要点,写一些代码片段,所以我尽量的直接上代码了。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-2.1.0.js"></script>
    </head>

    <body>
        <div id="div1">
            <textarea id="text" rows="8" cols="15"></textarea>
            <span></span>
        </div>
        <div id="viewBox">
            <!--这里是显示提示的区域-->
        </div>
        <script type="text/javascript">
            LimitedNnumber("#text", "#viewBox", 9)//调用函数需要传入三个参数,分别为,输入框、显示框、限制的长度(这里是9)

            function LimitedNnumber(eventBox, viewBox, textLength) {//调用函数需要传入三个参数,分别为,输入框、显示框、限制的长度
                $(document).on(‘input propertychange paste keyup‘, eventBox, function(event) {
                    this.value = this.value.replace(this.value.slice(textLength), "")//超出长度的部分替换为空
                    $(viewBox).html(this.value.length + "/" + textLength)
                })
            }
        </script>
    </body>

</html>

原文地址:https://www.cnblogs.com/jlfw/p/12217299.html

时间: 2024-10-10 04:35:19

js 实现textarea输入字数提示的相关文章

js 控制&lt;input type=textarea/&gt;输入字数限制

<!DOCTYPE html><html>     <head>     <title>JS限制Textarea文本域字符个数</title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <SCRIPT LANGUAGE="JavaScript"> 

JS控制文本框textarea输入字数限制

<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <SCRIPT LANGUAGE="JavaScript"> <!--// function textCounter(field,

JS控制文本框textarea输入字数限制的方法

<html> <head runat="server"> <title></title> <script type="text/javascript"> var maxstrlen = 160; function Q(s) { return document.getElementById(s); } function checkWord(c) { len = maxstrlen; var str = c.v

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

textarea限制字数提示

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <meta name="renderer" content="webkit"/> <meta name="ke

jquery插件artTxtCount输入字数限制,并提示剩余字数

工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=

实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求. 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用.假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符): <script language="#"

边输入边提示字数的文本 ()可直接引用)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

监听文本框输入开发仿新浪微博限制输入字数的textarea插件

监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入.粘贴.鼠标粘贴时触发). onpropertychange 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘