关于文本框字数的限制以及动态显示剩余字数

一、首先先看一个非常普遍的效果截图，根据需求写代码

<div style="padding-bottom: 100px"><textarea style="width:230px;height:160px;" id="textArea" cols="30" rows="10">dancer测试！</textarea><span><span id="textNum">0</span>/100</span><!-- 最多100字符，0处显示的是已经写了多少字符 -->
</div>
<script>$('#textArea').on("keyup",function(){$('#textNum').text($('#textArea').val().length);//这句是在键盘按下时，实时的显示字数if($('#textArea').val().length > 100){$('#textNum').text(100);//长度大于100时0处显示的也只是100
            $('#textArea').val($('#textArea').val().substring(0,100));//长度大于100时截取钱100个字符
        }})$('#textNum').text($('#textArea').val().length);//这句是在刷新的时候仍然显示字数
</script>

二、咱们再来讨论文本框限制字数的几种方法

1.只用css来限制

<textarea name="anchorAnnounce" cols="47" rows="2" maxlength="20" onchange="this.value=this.value.substring(0, 20)" onkeydown="this.value=this.value.substring(0, 20)" onkeyup="this.value=this.value.substring(0, 20)"  placeholder="喜欢我就关注我">喜欢我就关注我</textarea>

2.剩下的方法可自行查询

　　......

转载于:https://www.cnblogs.com/dancer0321/p/8267591.html

关于文本框字数的限制以及动态显示剩余字数相关推荐

监听文本框输入开发仿新浪微博限制输入字数的textarea插件。
转载自品略图书馆:http://www.pinlue.com/article/2020/03/1202/1310013961724.html Firefox.Chrome.IE9,IE10 均支持 o ...
监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
实现文本框以及其背景（根据输入字数）动态拉伸
使用Vertical Layout Group/Horizontol Layout Group实现文本框(根据输入字数)动态拉伸(文本框背景跟随文本框变化同时拉伸) padding :用于在子布局元素 ...
html右下角的字数计算,JavaScript_用JS剩余字数计算的代码，先看看HTML代码： textarea name - phpStudy...
用JS剩余字数计算的代码先看看HTML代码: 文字最大长度: 250. 还剩: 250. 可以看出onkeyup是当用户离开键盘后触发的事件,传递的参数是this(也就是当前所在的文档区域) 然后结 ...
PHP检测字数,js判断文本框剩余可输入字数的方法
js判断文本框剩余可输入字数的方法昨天项目上面遇到一个问题,就是在文本框输入的过程中判断剩余可输入是文字数量,百度了一下,找到了一个比较好的解决方法:代码如下: maxLen = 140; //可以 ...
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
java 限制文本框长度_[Java教程]如何限制textarea文本框的输入字数
[Java教程]如何限制textarea文本框的输入字数 0 2015-12-24 15:00:10 如何限制textarea文本框的输入字数: 在实际应用中,往往需要限制文本框的输入字数的长度,下面 ...
新浪微博关注html代码,Jquery实现仿新浪微博获取文本框能输入的字数代码
limit.js代码 //txt:文本框jquery对象 //limit:限制的字数 //isbyte:true:视limit为字节数:false:视limit为字符数 //cb:回调函数,参数为可输 ...
使用vue+textarea的属性maxlength制作一个文本框字数限制
使用vue加textarea的属性maxlength制作一个文本框字数限制 1.body部分 <div id="app"><div class="tex ...
文本框输入还剩多少字数统计代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

关于文本框字数的限制以及动态显示剩余字数

关于文本框字数的限制以及动态显示剩余字数相关推荐

最新文章

热门文章