JS实现控制Textarea文本域字符数

最新推荐文章于 2021-09-26 17:01:57 发布
最新推荐文章于 2021-09-26 17:01:57 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： JS && CSS 文章标签： javascript

  • 本文向大家简单介绍一下JS如何实现限制Textarea文本域字符个数，这里和大家分享一下的代码可以适时显示可以继续输入的字符长度。

    JS限制Textarea文本域字符个数

    用JavaScript限制一个文本框TEXTAREA输入字符多少进行限制，常见于留言板或评论功能上，这一个是限制用户不能超过多少字符，和最低需要输入多少字符正好相反。本代码可以适时显示可以继续输入的字符长度。

    1. <html> 
    2. <head> 
    3. <title>JS限制Textarea文本域字符个数</title> 
    4. <meta http-equiv="Content-Type" 
    5. content="text/html; charset=gb2312" /> 
    6. <SCRIPT LANGUAGE="JavaScript">    
    7. <!--//    
    8. function textCounter(field, countfield, maxlimit) {    
    9. // 函数，3个参数，表单名字，表单域元素名，限制字符；    
    10. if (field.value.length > maxlimit)    
    11. //如果元素区字符数大于最大字符数，按照最大字符数截断；    
    12. fieldfield.value = field.value.substring(0, maxlimit);    
    13. else    
    14. //在记数区文本框内显示剩余的字符数；    
    15. countfield.value = maxlimit - field.value.length;    
    16. }    
    17. //-->    
    18. </SCRIPT> 
    19. </head> 
    20. <body> 
    21. <form name=myform action=""> 
    22.   <textarea name="message" cols="28" rows="5" 
    23. onKeyDown="textCounter(this,document.getElementById('txtLen'),100);"
    24.  onKeyUp="textCounter(this,document.getElementById('txtLen'),100);
    25. "></textarea> 
    26.   您还可以输入:<input name="txtLen" type="text" 
    27. value="100" size="5" readonly="readonly">个字符  
    28. </form> 
    29. </body> 
    30. </html> 

larance
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js限制textarea每行输入字符串长度的代码
10-27
text通常我们可以直接用maxlength属性来控制输入的字符会长度
限制Textarea文本域内容的长度
you can you up up up的博客
03-29 3220
通过charCodeAt()函数获取字符的Unicode值，根据Unicode值得范围判断字符串中是否包含中文符，包含temp+2，不包含temp+1； 在body标签的onload加载事件中调用JavaScript中的函数，并在<textarea>的onkeyup事件和onkeydown事件中调用JavaScript中的函数，实时跟踪用户输入的内容长度，在文本域之后显示； <...
Vue.js 极简小例：表单 （输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）
愿我如星君如月 ... 夜夜流光相皎洁 ...
11-19 6396
代码： &lt;template&gt; &lt;div &gt; &lt;p&gt;----------------------------------------------------------------------------------------------------------------------&lt;p/&gt; &lt;!-- input ...
JS在文本域光标位置插入文本
云游的猪
05-10 1476
插入前： 插入后： functioninsertAtCursor(myField,myValue){ //IE浏览器 if(document.selection){ myField.focus();...
前端，js实现input-file标签选择文件读取内容到textarea 文本区域中
lingle1的博客
04-19 2045
文章目录效果代码 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></sc...
JS限制Textarea文本域字符个数的具体实现
10-27
介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下
div模拟textarea文本域实现高度自适应效果代码
11-21
一、关于textarea文本域以及高度自适应 textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框： 作为多行文本域功能来讲，textarea满足了我们...
在textarea文本域中显示HTML代码的方法
10-31
主要为大家介绍下如果在textarea文本域中显示HTML代码，其实多用于网页编辑的开发，大家可以参考下
js实现textarea限制输入字数
12-09
通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设我们有一个id为 txta1 的textarea文本区，我们可以通过以下代码限制它的键盘输入字数为10个字（汉字或其他小角字符）： ...
菜鸟学JS——JS在文本域光标位置插入文本
热门推荐
纸上得来终觉浅，绝知此事要躬行
09-30 1万+
很久没有写关于JS的博客了，说实话，对于JS小弟仅限于会简单使用的程度。作为一个非前端人员，个人觉得更好更深入的掌握JS还是很有必要的。这不仅仅可以提高自身价值，更重要的是很多情况下使用JS可以更好的解决问题，带来更好的用户体验。扯得稍微远了一些，回归正题，今天跟大家分享一个很实用的小实例——在光标处插入文本。   JS代码：   function insertAtCursor(myF...
JS简单限制textarea内输入字符数量的方法
11-25
本文实例讲述了JS简单限制textarea内输入字符数量的方法。分享给大家供大家参考。具体如下： 这里演示JS限制一个area内的字符不能超过255，多余则截取。 代码如下： [removed] function getStringUTFLength(str) { var value = str.replace(/[\u4e00-\u9fa5]/g," "); //将汉字替换为两个空格 return value.length; } function leftUTFString(str,len) { if(getStringUTFLength(str)<=len) { return
使用js实现textarea文本域长度,限制输入字数并统计剩余输入字符数
徊忆羽菲
09-26 962
使用js实现textarea文本域长度,限制输入字数并统计剩余输入字符数输入框 输入框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function getStringUTFLength(str) { var value = str.replace
限制文本域输入字符个数，即使显示输入字符数和剩余字符数，超出不显示！...
weixin_33901843的博客
03-23 387
文本域： 1 <td class="tddata"> 2 &nbsp;<textarea rows="4" id="txtContent" maxlength="200" onkeyup="fun()" name="txtContent" cols="160" style="...
Web前端之文本域textarea显示输入剩余字数
航仔的博客
11-21 1434
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t...
Basic Server设置动态IP
qq_45769990的博客
09-09 1万+
1.首先新建一个basic server 虚拟主机 2.输入账户 密码 此密码 输入时看不见 正常输入即可 3.输入 ifconfig 查看当前配置网络 3.输入 vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑信息 3.1 输入i进入编辑模式 把onboot改为yes 按ESC键 然后输入：wq 保存并退出 3.2输入 cat /etc/sysconfig/network-scripts/ifcfg-eth0查看信息 3.3确认无误,重启网关 输
文本域中只允许输入特定长度的字符
Nightliar的博客
04-05 663
<textarea class="textarea" placeholder="描述文字（只能输入50个字）" id="subtitle" name="subtitle" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)">${weekly.subtitl
限制文本域(textarea)输入字符数
nvryy的专栏
06-10 281
以下为限制用户在文本域中输入的字符为100以内: 写道 &lt;textarea rows="7" cols="50" name="contents" id="contents" onpropertychange = "if(value.length&gt;100) value=value.substr(0,100)"&gt;&lt;/textarea&gt;
限制textarea文本域中输入字符个数…
JarryLiu 的专栏
04-08 3412
通常我们需要对用户文本输入进行字符数量上的限制，对于文本输入域，我们可以通过maxlength属性来限制用户可输入的最大字符数，但是textarea这种文本输入域的话我们只能通过js来控制输入字符数了，因为它没有提供maxlength属性。首先我们定义一个简单的函数，如下：   通常我们需要对用户文本输入进行字符数量上的限制，对于文本输入域，我们可以通过maxlength属性来限制用户可输入的最
iview textarea文本域autosize render写法
最新发布
11-17
iview是一个基于Vue.js的开源UI组件库，提供了丰富的组件和工具，其中包括了textarea文本域组件。 在iview中，textarea文本域组件可以使用autosize属性来自动调整文本域的大小，使得文本域随着输入内容的增加而自动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值