JavaScript 控制textarea(文本域)的输入字数

最新推荐文章于 2024-04-30 08:34:04 发布
最新推荐文章于 2024-04-30 08:34:04 发布
阅读量5.3k 收藏 7
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youth99dream/article/details/51876210
版权
本文介绍了如何使用JavaScript限制textarea的输入字数，实现实时显示剩余字数，并在超出字数时禁止提交。通过计算中文和英文字符，确保中文计为一个字符，英文计为半个字符。
摘要由CSDN通过智能技术生成

1. 需求

  • 限制文本域的输入字数
  • 能够看到还可输入字数和超出字数
  • 如果超出字数禁止提交
  • 将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。
    　　　　文本域效果展示

2. 思路

  • 文本框获得焦点时启动定时器，计算文本框的字数，判断里面的字符是否为空，从而改变按钮的显示状态和文字的个数
  • 将一个中文字符转换成两个字符计算，一个英文字符按一个英文字符计算，然后在显示已经输入字符数中除以2，记住向上去整（parseInt方法），不然就出现0.5个字符了

3. 代码

<!DOCTYPE html>
<html</
最低0.47元/天 解锁文章
丿永恒丨刹那
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在textarea文本域中显示HTML代码的方法
12-10
这是一个iframe 的 给你一个参考的：  代码如下:  <iframe ID=”tryit” MARGINHEIGHT=”1″ MARGINWIDTH=”1″ width=”100%” height=”300″ scrolling=”auto”></iframe>   ...
使用JavaScript限制TextArea多行文本域的可输入字数
08-05
总结起来，通过JavaScript我们可以轻松地实现对`<textarea>`的字数限制功能，包括监听输入事件、检查字符数、限制输入以及提供实时反馈。这样的功能对于优化用户界面和提高网站质量具有重要意义。通过结合源码和工具...
JS限制文本域字数
ld191474639的专栏
11-27 2915
#num{ color:red; } 无标题文档 function shiqu(){ document.getElementById("status").style.borderColor=""; } function jiadian(){ document.getElementById("status").style.borderColor="#00CCFF"; } funct
js实现textarea限制输入字数
12-09
实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个） textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过maxlength属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设我们有一个id为 txta1 的textarea文本区，我们可以通过以下代码限制它的键盘输入字数为10个字（汉字或其他小角字符）： ＜script language="#" type="text/e
如何在文本域右下角设置字数限制提示
最新发布
ggq53219的博客
04-30 756
今天教大家如何做出以上这样好看又实用的文本域字数提示功能
源生js实现文本域字数限制
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
12-31 321
<script> //留言板文本域输入字数限制 var i = document.querySelector('.kk'); text.addEventListener('focus', function () { var akk = setInterval(function () { i.innerHTML = 131 - text.value.length; if (i.innerHTML <= 0
js计算文本域还能输入多少个字
semial的专栏
09-24 1255
1、添加一个事件 onkeyup="checkLength(this,'256','chLeft');" 第一个参数：代表当前输入的字符；第二个参数：能输入多少个字符；第三个参数：要显示能输入多少个字符的span或者div id名称 //验证文本域还能输入多少个字 function checkLength(which,count,name) { var maxChars = count;
Javascript 限制文本域中的字数
weixin_30349597的博客
08-03 187
Javascript 限制文本域中的字数，能动态提示输入的长度： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or...
限制textarea文本框字数的两种方法
简单是书的博客
11-24 3070
//不能直接在css样式表中添加maxlength //在js中引入id为msg的textarea。 msg.setAttribute(“maxlength”,140);
textarea文本域宽度和高度width及height自动适应实现代码
09-28
本文将详细介绍如何通过JavaScript和CSS来实现`textarea`文本域的宽度和高度自适应。 首先，对于宽度的自动适应，通常我们希望`textarea`能填满其父容器的宽度。在HTML中，我们可以给`textarea`添加一个CSS类，如`...
js 文本域限制输入的数据量
cherryQQ
05-06 185
New Document function CountStrByte(Message,Total,Used,Remain){ //字节统计 var LastCount =0; var ByteCount = 0; var StrValue = Message.value; var StrLength = M...
JS限制Textarea文本域字符个数的具体实现
10-27
介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下
Textarea限制输入文本长度
12-25
自己写的一个小东西 前段时间自己要用在网上下载了一个 不过不好用，自己就写了一个 自我感觉还不错，而且对于限制输入的东西可以根据不同的情况自己修改，方便大家 方便你我他！
JS控制文本框textarea输入字数限制的方法
10-27
JS控制文本框textarea输入字数限制的方法，需要的朋友可以参考一下
JS限制Textarea文本域字符个数
phantomes的专栏
03-14 97
&lt;html&gt; &lt;head&gt; &lt;title&gt;JS限制Textarea文本域字符个数&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;SCRIPT LANGUA
js限制文本域输入长度
jiangyanli199101的专栏
10-31 579
function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit) // if too longtrim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left
js控制textarea输入的字数
继续前行
07-29 215
js控制textarea输入的字数
javascript 控制文本框输入格式
weixin_33717298的博客
02-15 261
1、只允许输入数字 <input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,’’)"> 2、只允许输入英文字母、数字和下划线(以下二种方法实现) <input name="username" type="text" style="ime-mode:disable...
限制中文输入是英文输入长度的一半
我的技术博客
07-12 433
在限制输入长度的时候可能会有这样的一个需求：输入的中文长度得是英文长度的一半。也就是说一个输入框你可以输入20个英文字符，但是只能输入10个中文汉字或其他字符。 之前的思路是利用正则判断汉字的Unicode编码[\u4e00-\u9fa5]，首先正则的性能不是很好，其次如果是emoji表情，长度是按照英文字符还是中文字符判断呢？ 偶然的机会看到一个方法使用charCodeAt()判断Unicode...
iview textarea文本域autosize render写法
11-17
iview是一个基于Vue.js的开源UI组件库，提供了丰富的组件和工具，其中包括了textarea文本域组件。 在iview中，textarea文本域组件可以使用autosize属性来自动调整文本域的大小，使得文本域随着输入内容的增加而自动扩展高度。 使用autosize属性的render写法如下： ```html <template> <div> <i-textarea v-model="textareaValue" :autosize="{minRows: 2, maxRows: 6}"></i-textarea> </div> </template> <script> export default { data() { return { textareaValue: '' }; } }; </script> ``` 在上述代码中，我们首先引入了i-textarea组件，并使用v-model指令绑定了textareaValue的值，通过autosize属性设置了文本域的最小行数和最大行数。这样，当用户在文本域中输入内容时，文本域会根据输入的内容自动扩展或者收缩高度，以保证内容的显示完整。 通过上述render写法，我们可以非常方便地使用iview的textarea文本域组件，并且实现了自动调整高度的功能，提升了用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值