显示文本框还可以输入多少字数

最新推荐文章于 2022-08-01 15:32:46 发布
最新推荐文章于 2022-08-01 15:32:46 发布
阅读量1.8k 收藏
点赞数
分类专栏： HTML/CSS/JS 文章标签： javascript html function input 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifniao/article/details/1666778
版权

代码相似，只是表现形式略微有点差异。

第一种，未输入的时候，隐藏了 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language='javascript'>
<!--code written by Ridincal
var charNum = 0;
function changeInfo()
{
charNum = document.all.ipt.value.length;
var maxLength = document.all.ipt.maxLength;
if(maxLength>=charNum)document.all.info.innerHTML="最多发送20字，剩余"+(20-charNum)+"字。";
}
//-->
</script>
</head>

<body>
<input type="text" id="ipt" οnkeyup="changeInfo()" maxlength="20"><span id="info">最多发送20字</span>
</body>
</html>

第二种  直接显示剩余的字数

<html>
<meta charset="gb2312">
<head>
<script language="javascript">
maxLen = 100;
function checkMaxInput(form) { 
if (form.message.value.length > maxLen){
form.message.value = form.message.value.substring(0, maxLen);
} else {
form.remLen.value = maxLen - form.message.value.length;
}
}
</script>
</head>
<body>
<form name=myform>
<font size="2" color="red"> ( 你最多可以输入100个字 ) </font><br>
<textarea name=message wrap=physical cols=28 rows=4 onKeyDown="checkMaxInput(this.form)"></textarea>
<br>
<font size="2">还可输入字数:</font>
<input type=text name=remLen size=2 maxlength=3 value="100" readonly>
</form>
</body>
</html>

feifniao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js判断文本框剩余可输入字数的方法
10-24
主要介绍了js判断文本框剩余可输入字数的方法,可实现直观显示文本框可输入字数的功能,非常具有实用价值,需要的朋友可以参考下
php输入框字数限制,实时监控文本框输入字数详解
weixin_28933027的博客
03-13 291
本文主要为大家分享一篇实时监控文本框输入字数的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。需求：实时监控文本输入框的字数，并加以限制1、实时监控当前输入字数，直接使用onkeyup事件方法，给输入框加maxlength属性限制长度。如：0/10var txtNum = document.getElementById("txtNum");txt.add...
THINKPHP字数限制，简介等使用，显示规定字数，剩余用...显示
Alittile_seven的博客
08-24 2664
THINKPHP字数限制，简介等使用，显示规定字数，剩余用...显示
Element-ui 中 el-input 输入框显示：输入字数以及限制输入字数
热门推荐
migexiaoliang的博客
07-16 1万+
项目中使用Element-ui中el-input输入框显示输入字数以及限制输入字数。
react中input输入框显示字数
Anhelo_的博客
08-01 1278
react中input输入框的字数显示
2022-07-25 工作记录--React/JS-input输入框 / textarea文本框输入字数限制以及字数显示
weixin_48850734的博客
07-25 3791
React/JS-textarea文本框输入字数限制以及字数显示
js实时监控文本框输入字数的实例代码
10-18
下面小编就为大家分享一篇实时监控文本框输入字数的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery textarea文本框输入文字字数限制提示代码
06-10
jQuery textarea文本框输入文字字数限制提示代码，设置固定输入字符，实时计算显示已经输入多少字符。
jQuery textarea文本框输入文字字数限制提示代码.zip
07-11
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ ... var count_total = $this...jQuery textarea文本框输入文字字数限制提示代码，设置固定输入字符，实时计算显示已经输入多少字符。
JS控制文本框textarea输入字数限制的方法
01-19
代码如下:<... <head> <title>JS限制Textarea文本域字符个数</title> <... charset=gb2312″ /> [removed] <...–// function textCounter(field, countfield, maxlimit) { // 函数，3...
html 设置文本框字数,javascript限制textarea文本框标签输入的字数并提示还可以输入多少字符...
weixin_36280648的博客
05-30 1693
由于HTML页面中的 textarea 文本框标签需要对字数长度设置固定输入字符。所以，本文主要介绍使用 javascript 动态控制 HTML 页面中的 textarea 文本框标签输入的文字内容和长度，限制其输入的字符数，并且提示还可以输入的字数，超出设置的字符数长度时就输入不进去内容的解决方法。javascript动态控制textarea文本框输入的文字内容并提示还可以输入多少字符数字限制...
提示文本框还可以输入多少个字数
mao__ge的博客
11-21 2379
提示文本框还可以输入多少个字数 最近有一个需求 需要提示用户 文本框最多能输入多少个字，且用户输入完成之后在下方提示此处剩余输入的字数是多少 下面附上代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt
显示/限制输入框的字数
肖肖肖丽珠的博客
03-28 2213
0/50字 $("textarea").keyup(function(){ ---鼠标抬起事件 var num=$(this).val().length; ---获取输入的字数，注意textarea是通过val()来获取的。不是html啊啊啊 if(num else{$(num).substr(0,50)}
输入文本框,显示还可输入多少字
一夜三千行
08-27 1510
还可以输入140个字 以下是JS function testjie(obj, maxlimit) {   var len = byteLength(obj.value);  if(len > maxlimit) {  document.getElementById('maxlimitdiv').innerHTML = "已超出 "+parseInt((len-maxlimit+1)
用jquery判断输入框还可以输入多少字
CodingAlarm的专栏
07-20 4235
效果 全部代码，粘贴可用 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #comment textarea{height:100px;} #comment p span{color:red;}     
实时显示字数的textarea文本框
2012013977的博客
09-25 1万+
实时显示字数的textarea文本框
vue 输入框显示输入字数
m0_46428066的博客
11-30 1588
1.在输入框外显示输入文本长度 备注：<i-input type="textarea" v-model="notes" maxlength="120" style="width:1100px" :autosize="{minRows: 2}"/> <div style="float: right"> {{notes.length}}/120</div> 效果图： 里插入图片描述2.在输入框内显示输入文本长度 在输入框内显示文本长度，仅仅需要一个
JS textarea文本框输入字数限制以及字数显示
m0_46364033的博客
03-17 6663
大致实现的效果如下：（其中样式自行调整） html代码： // 设置字数限制为100，显示行数为5行 <div> <textarea name="" id="licenseText" rows="5" maxlength="100" placeholder="选填"></textarea> <div><span id="textCount">0</span>/100</div> </div> JS代码：
测试博客
weixin_42872123的博客
11-02 364
在这里插入代码片@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式
Jquery 限制文本框输入字数
最新发布
06-09
您可以使用 jQuery 的 keyup 和 keydown 事件来限制文本框输入的字数。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>限制文本框输入字数</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" id="myInput" maxlength="10"> <div id="remainingChars"></div> <script> $(document).ready(function() { var maxLength = $("#myInput").attr("maxlength"); $("#remainingChars").html(maxLength + " characters remaining"); $("#myInput").on("keyup keydown", function() { var currentLength = $(this).val().length; var remainingLength = maxLength - currentLength; $("#remainingChars").html(remainingLength + " characters remaining"); if (remainingLength < 0) { $(this).val($(this).val().substr(0, maxLength)); } }); }); </script> </body> </html> ``` 在上面的示例代码中，我们将文本框的最大长度设置为10。然后我们使用 jQuery 的 keyup 和 keydown 事件来监听用户在文本框中输入的内容。在事件处理程序中，我们获取当前输入内容的长度，并计算出剩余可输入的字符数。如果用户输入的字符数超过了最大长度，我们就截取前面的字符，保证输入内容不会超过最大长度。最后，我们将剩余可输入字符数显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值