基于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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
去除html代码里面的script正则方法
May 19 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
webpack入门必知必会
2017/01/16 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python生成随机数的方法
2014/01/14 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
妇女儿童发展规划实施方案
2014/03/16 职场文书
作文评语大全
2014/04/23 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
教育实习指导教师评语
2014/12/31 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技