jQuery实时统计输入框字数及限制
更新时间：2020年06月24日 15:09:43 作者：Jeslie-He
这篇文章主要为大家详细介绍了jQuery实时统计输入框字数及限制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
项目中经常会用到文本输入框，而且需要限制输入的字数。
下面分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法，代码如下：
HTML：简单的写一下，能实现功能即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery实时统计输入框字数及限制的方法</title>
<style>
#content{
border: none;
outline: none;
resize: none;
width: 200px;
height: 100px;
border: 1px solid #ccc;
border-radius: 6px;
padding: 4px;
}
</style>
</head>
<body>
<textarea id="content" placeholder="新消息内容" ></textarea>
<span class="contentcount">0</span>/200
<script src="./jquery.js"></script>
<script>
$('#content').bind('input propertychange',function(){
var count = $(this).val().length; //获取输入的字数
if(count > 200){
var char = $(this).val();
char = char.substr(0,200); //截取前200的字符串
$(this).val(char);
count = 200;
alert('超出200了')
}
$('.contentcount').text(count);
})
</script>
</body>
</html>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了jquery实现拖拽table表头改变列宽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
添加节点的方法有很多，在本文将为大家介绍下jquery中添加节点几种方法，感兴趣的朋友可以参考下2013-09-09
jQuery Tips 为AJAX回调函数传递额外参数的方法
讨论这个问题基于如下场景：点击页面上某个按钮之后，触发click事件，事件处理函数内部发送一个AJAX请求，AJAX回调函数更新页面的某一个部分。2010-12-12
本篇文章主要是对jQuery中.live()方法的用法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
本篇文章主要是对Jquery中的ajaxStart()与ajaxStop()方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jquery中快速取值的方法有很多，在本文为大家介绍下通过name实现快速取值，感兴趣的朋友可以参考下2014-01-01
仿淘宝京东多条件筛选可自行结合ajax加载，使用Jquery简单实现，具体如下，喜欢的朋友可以参考下2013-08-08
在项目中遇到一个问题，本来以为是使用dropdownlist的效果的，仔细一看，其实是在点击文本框以后，在其正下方弹出一个层，里边有多个选项进行选择。很像jQuery.datepicker 的效果。2009-10-10
HTML文档，不但有一系列语义标签，每个标签下属还有一系列属性节点。自然我们也想去操作这些属性节点。格式仍然为$(selector).方法2012-09-09
这篇文章主要介绍了jQuery实现的倒计时效果,结合实例形式总结分析了jQuery针对日期与时间的运算实现倒计时功能的相关技巧,需要的朋友可以参考下2016-04-04
最新评论