JQuery总括input和textarea文字输入数量

By admin in 4858美高梅 on 2019年5月17日

正文重要介绍了jQuery达成总结输入文字个数的主意,须要的朋友能够参照下。

JQuery总括input和textarea文字输入数量。应用JQuery总计input和textarea文字输入数量代码,jquerytextarea

本文主要介绍了jQuery完结计算输入文字个数的方法,必要的敌人能够参照他事他说加以考察下。

HTML部分:

<input type="text" value="我是输入的文字"  maxlength="10" id="detail1"/>
<p>0/10</p>

<textarea placeholder="最多输入100字" rows="3" maxlength="100" class="editDetail" id="detail2" >呵呵</textarea>
<p>0/100</p>

JS部分:

 1 $(function(){        
 2         /*input字数*/
 3         /*在页面刚载入时先显示出输入框的字数*/
 4         var text1=$("#detail1").val();
 5         var counter1=text1.length;
 6         $("#detail1_num").text(counter1);
 7         /*添加触发事件进行动态计算输入框的字数*/
 8         $("#detail1").on('blur keyup input',function(){
 9             var text=$("#detail1").val();
10             var counter=text.length;
11             $("#detail1_num").text(counter);
12         });
13        /* textarea字数*/
14         var text2=$("#detail2").val();
15         var counter2=text2.length;
16         $("#detail2_num").text(counter2);
17         $("#detail2").on('blur keyup input',function(){
18             var text=$("#detail2").val();
19             var counter=text.length;
20             $("#detail2_num").text(counter);
21         });
22 });

成效图如下:

4858美高梅 1

   由于博主首要做活动端支出,刚开头在运动端测试时由于输入文字是会出现输入框,在输入框中输入的文字在测算时会出现错误,所以又增添了二个input事件,这些事件会在输入框内边输入边实行测算(主借使拼音输完现在确定汉字部分)。

  希望对大家有扶持。

 

 

 小说均为原创,转载请以链接情势注解本文地址 ,多谢

本文主要介绍了jQuery实现总计输入文字个数的法子,需求的情侣可以参照下。
HTM…

本文重要介绍了jQuery完毕总括输入文字个数的章程,须要的爱侣可以参谋下。

HTML部分:

HTML部分:

<input type="text" value="我是输入的文字"  maxlength="10" id="detail1"/>
<p>0/10</p>

<textarea placeholder="最多输入100字" rows="3" maxlength="100" class="editDetail" id="detail2" >呵呵</textarea>
<p>0/100</p>
<input type="text" value="我是输入的文字" maxlength="10" id="detail1"/>
<p>0/10</p>
<textarea placeholder="最多输入100字" rows="3" maxlength="100" class="editDetail" id="detail2" >呵呵</textarea>
<p>0/100</p>

JS部分:

JS部分:

 1 $(function(){        
 2         /*input字数*/
 3         /*在页面刚载入时先显示出输入框的字数*/
 4         var text1=$("#detail1").val();
 5         var counter1=text1.length;
 6         $("#detail1_num").text(counter1);
 7         /*添加触发事件进行动态计算输入框的字数*/
 8         $("#detail1").on('blur keyup input',function(){
 9             var text=$("#detail1").val();
10             var counter=text.length;
11             $("#detail1_num").text(counter);
12         });
13        /* textarea字数*/
14         var text2=$("#detail2").val();
15         var counter2=text2.length;
16         $("#detail2_num").text(counter2);
17         $("#detail2").on('blur keyup input',function(){
18             var text=$("#detail2").val();
19             var counter=text.length;
20             $("#detail2_num").text(counter);
21         });
22 });
$(function(){ 
 /*input字数*/
 /*在页面刚载入时先显示出输入框的字数*/
 var text1=$("#detail1").val();
 var counter1=text1.length;
 $("#detail1_num").text(counter1);
 /*添加触发事件进行动态计算输入框的字数*/
 $("#detail1").on('blur keyup input',function(){
 var text=$("#detail1").val();
 var counter=text.length;
 $("#detail1_num").text(counter);
 });
 /* textarea字数*/
 var text2=$("#detail2").val();
 var counter2=text2.length;
 $("#detail2_num").text(counter2);
 $("#detail2").on('blur keyup input',function(){
 var text=$("#detail2").val();
 var counter=text.length;
 $("#detail2_num").text(counter);
 });
});

作用图如下:

职能图如下:

4858美高梅 2

4858美高梅 3

   由于博主首要做运动端支付,刚起先在移动端测试时出于输入文字是会出现输入框,在输入框中输入的文字在图谋时会现身谬误,所以又加多了贰个input事件,那么些事件会在输入框内边输入边实行计算(主假若拼音输完现在确定汉字部分)。

鉴于博主首要做活动端支出,刚先河在活动端测试时由于输入文字是相会世输入框,在输入框中输入的文字在图谋时会出现错误,所以又增添了三个input事件,这么些事件会在输入框内边输入边实行计算(主假设拼音输完以往肯定汉字部分)。

  希望对大家有扶助。

4858美高梅,可望对咱们有救助。

 

以上便是本文的全体内容,希望本文的剧情对大家的求学只怕干活能带动一定的救助,同时也希望多多协理脚本之家!

 

您恐怕感兴趣的小说:

  • input
    输入框得到/失去宗旨时隐藏/展现文字(jquery版)
  • input 和 textarea
    输入框最大文字限制的jquery插件
  • jQuery达成表单input中唤醒文字value随鼠标主旨移进移出而显得或潜伏的代码
  • jQuery完结限制textarea文本框输入字符数量的主意
  • jQuery质量评定输入的字符串包括的中国和英国文的多少
  • jQuery完成总计复选框选中数量
  • jquery完结textarea输入框限制字数的方法
  • jQuery总结textarea中文字数(剩余个数)的小程序
  • 基于jquery的textarea发表框限制文字字数输入(增多汉语识别)
  • JQuery
    表单中textarea字数限制实现代码
  • 据书上说jquery的inputlimiter
    完毕字数限制功用

 文章均为原创,转发请以链接方式注解本文地址 ,多谢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有