基于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 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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
文件上传的实现
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python常见的格式化输出小结
2016/12/15 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
如何使用PHP session
2015/04/21 面试题
职业生涯规划书前言
2014/04/15 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技