textarea 输入字数限制，并显示可输入字符

最新推荐文章于 2024-06-18 23:00:00 发布
最新推荐文章于 2024-06-18 23:00:00 发布
阅读量1.2k 收藏 4
点赞数 1
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41533659/article/details/125561705
版权

效果

在这里插入图片描述
在这里插入图片描述

相关HTML

<html>
 <head>
     <title>测试</title>
     <meta charset="utf-8">
	 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>


	 <script>
///numLimit：字数限制
///isRequired：文本是否必填
function numLimit(numLimit,isRequired) {
    var text = $("#DJZY").val();
    var textLength = 0;
    if (text!="undefined"&&text!=""&&text!=null) {
        textLength = text.length;
    }
    if (isRequired && textLength == 0) {
	//如果必填，而文本框没内容的话，会有背景颜色
        $("#DJZY").css('background-color', 'rgb(255,0,0,0.05)');
    } else {
        $("#DJZY").css('background-color', '#fff');
    }
    $("#DJZYLimit").html(textLength + "/" + numLimit);
}
	 </script>
 </head>
 <body>
 <div>
  <textarea oninput="numLimit(200,true)" id="DJZY" name="" maxlength="200" style="resize;width: 99.5%;height: 80px;resize: none;background-color:rgb(255,0,0,0.05)" placeholder="200字以内"></textarea>
  <span id="DJZYLimit" style="float: right;;position: relative;left: -10px;top: -20px;">0/200</span>
  </div>
</body>
 </html>
喜欢看剧的小菇凉
关注
textarea限制字数
kkrgwbj的专栏
03-22 429
textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过maxlength属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设我们有一个id为 txta1 的textarea文本区，我们可以通过以下代码限制它的键...
效果超酷的textarea的输入字数限提示
02-22
Element：Object限制统计对象 (*必须) MaxLen：Number最大可输入长度 (*必须) objMax：Object显示最大输入长度对象 (*可选) objTotal：Object显示输入统计对象 (*可选) objLeft：Object显示可输入长度对象 (*可选) Hint：Boolean当长度超出上限时，是否提示 (*可选)
如何优雅地限制textarea的输入字数？
最新发布
瑶山的博客
06-18 1347
大家好，我是瑶山，今天聊聊textarea。
textarea标签实现右下角展示限制字数及当前字数
wsy52521的专栏
05-09 3175
这样写很有可能出现输入时输入信息与限制信息重合的情况，所有需要在外层加入div标签设置高度为100px，textarea标签高度为84px，span标签top值设置为-5，文字大小设置为12px。这样设置测试过火狐，谷歌，ie，edge兼容性都很好。查了好久，基本都是直接在textarea标签下写一个span标签。
texearea 限制字数_js实现textarea限制输入字数
weixin_39808803的博客
12-20 249
实现textarea限制输入字数(包含中文只能输入10个，全ASCII码能够输入20个)textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过maxlength属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设我们...
texearea 限制字数_Js中textarea 限制字数的方法
weixin_42528191的博客
01-12 430
在input标签中，只需要设置maxlength=”200”即可，但是在textarea标签中，IE9及IE9以下浏览器是不支持的，IE10、IE11则支持，估计后续的版本应该都会支持。现在来说下怎么让大部分IE版本都支持textarea标签限制字数，同时允许以chorme为内核的浏览器也支持。onkeyup="this.value=this.value.substring(0, 200)" &...
实现textarea限制输入字数
21ming的专栏
11-30 191
实现textarea限制输入字数   实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个） textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过maxlength属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。 通常的做法就是使用#脚本语...
Textarea输入字数限制实例(兼容iOS&安卓)
08-30
<title>textarea输入字数限制（兼容ios和安卓） <textarea placeholder="请输入家庭地址（必填）" rows="2"></textarea> <!-- 更多textarea元素 --> var textarea = document.getElementsByTagName('...
js实现textarea限制输入字数
12-09
实现textarea限制输入字数（包含中文只能输入10个，...假设我们有一个id为 txta1 的textarea文本区，我们可以通过以下代码限制它的键盘输入字数为10个字（汉字或其他小角字符）： ＜script language="#" type="text/e
控制textarea文本长度,并限制输入字数(带统计显示)
07-28
限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } <textarea id="inputText" rows="4" cols="50" maxlength="100"></textarea> <span id="charCount">0/100 var ...
jQuery编写textarea输入字数限制代码
10-20
在介绍jQuery如何实现textarea输入字数限制之前，我们首先要了解jQuery的基础知识和textarea的HTML属性。jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互，极大地...
JS控制文本框textarea输入字数限制的方法
10-27
本文将详细介绍如何使用JavaScript来控制textarea文本域的输入字数限制。 首先，从给定的文件内容中，我们可以看到一个简单的HTML页面结构，其中包含一个textarea元素和一个用于显示剩余字符数的文本框。页面通过...
textarea字符输入限制
funi16的专栏
02-04 888
$(document).ready(function() { var maxNum = 100; $('#status').bind({ keypress : function() { var inputText = $(this).val(); var numChar = inputText.length; var charRemain = numChar
textarea显示字数
qq_43531886的博客
12-11 1926
页面布局 <view class="textareaBox"> <textarea class="textarea" maxlength="100" bindinput="bindinputTextArea" placeholder="请输入需要分析的话" /> <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> .
JS textarea文本框输入字数限制以及字数显示
m0_46364033的博客
03-17 7164
大致实现的效果如下：（其中样式自行调整） html代码： // 设置字数限制为100，显示行数为5行 <div> <textarea name="" id="licenseText" rows="5" maxlength="100" placeholder="选填"></textarea> <div><span id="textCount">0</span>/100</div> </div> JS代码：
textarea限制输入字数
我的技术总结
12-21 476
您还可输入300个字
textarea 限制输入字数
Sophiego的博客
05-18 1034
textarea 要限制输入的最大字数，textarea 有一个属性max-length ,但它 并不兼容IE9，就需要用js做判断了。 一旦字数超过我们规定要输入的最大字数，就截取字符串。 if($scope.content.length>=20){ otherStr = $scope.content.substr(0,20); $scope.content= otherStr; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值