基于JS实现textarea中获取动态剩余字数的方法


Posted in Javascript onMay 25, 2016

案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能。当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下。当然我的封装还有缺漏,但是基本功能是实现了。

首先介绍下单个textarea实现案例

html部分:

<textarea id="text_txt1"></textarea>
<span id ="num_txt1">剩余可输入600字</span>

js部分:

$(function(){
$('#text_txt1').on('keyup',function(){
var txtval = $('#text_txt1').val().length;
console.log(txtval);
var str = parseInt(600-txtval);
console.log(str);
if(str > 0 ){
$('#num_txt1').html('剩余可输入'+str+'字');
}else{
$('#num_txt1').html('剩余可输入0字');
$('#text_txt1').val($('#text_txt1').val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候,那么字数不能再增加,只能是600个字
}
//console.log($('#num_txt').html(str));
});
})

然后介绍同页面下多个textarea实现案例

function changeLength(obj,num){
obj.on('keyup',function(){
var txtval = obj.val().length;
//console.log(txtval);
var str = parseInt(600-txtval);
//console.log(str);
if(str > 0 ){
num.html('剩余可输入'+str+'字');
}else {
num.html('剩余可输入0字');
obj.val(obj.val().substring(0, 600));
}
//console.log($('#num_txt').html(str));
});
}
$(function(){ //我这里有四个,所以调用4次
changeLength($('#text_txt1'),$('#num_txt1'));
changeLength($('#text_txt2'),$('#num_txt2'));
changeLength($('#text_txt3'),$('#num_txt3'));
changeLength($('#text_txt4'),$('#num_txt4'));
});

当然这里面实际上要求的字数也可以封装在函数内部,不过我就不封装了。这样就实现了当输入文字的时候,span内部会自动显示剩余字数,当输入值达最高值时,显示剩余字数为0,且无法在新填入内容。当删除文字的时候,span又能动态获取剩余字数。

下面上下别人的代码,这次多少也借鉴了别人的写法

html:

<div class="family_v2">
<p class="nickname_v2">简介:</p>
<textarea id="content" name="sign" style="height:60px;overflow-y: hidden;"
onkeyup="changeLength(this,60)" class="nicknameBox_v2 brief_box_v2">
</textarea>
<div class="limit_num_v2">
<h3>60</h3>
</div>
</div>

js:

//验证textarea的长度
function changeLength(obj,lg){
var len = $(obj).val();
$(obj).next().find("h3").text(lg-len.length);
if(len.length>=lg){
$(obj).next().find("h3").text(0);
$(obj).val(len.substring(0,lg));
}
}

以上所述是小编给大家介绍的基于JS实现textarea中获取动态剩余字数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 #Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 #Javascript
jquery分隔Url的param方法(推荐)
May 25 #Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 #Javascript
使用jquery提交form表单并自定义action的方法
May 25 #Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 #Javascript
jquery 遍历数组 each 方法详解
May 25 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php基础学习之变量的使用
2011/06/09 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
Python中的pprint折腾记
2015/01/21 Python
使用python加密自己的密码
2015/08/04 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python装饰器使用实例详解
2019/12/14 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
毕业自荐信
2013/12/16 职场文书
学习新党章思想汇报
2014/01/09 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
行政处罚告知书
2015/07/01 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
python3 字符串str和bytes相互转换
2022/03/23 Python