js 控制<input type=textarea/>输入字数限制

最新推荐文章于 2024-08-16 13:24:28 发布
最新推荐文章于 2024-08-16 13:24:28 发布
阅读量286 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/dangjianshun/p/5434579.html
版权

<!DOCTYPE html>
<html> 
   <head> 
   <title>JS限制Textarea文本域字符个数</title> 
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
   <SCRIPT LANGUAGE="JavaScript"> 
   <!--// 
   function textCounter(field, countfield, maxlimit) { 
   // 函数，3个参数，表单名字，表单域元素名，限制字符； 
   if (field.value.length > maxlimit) 
   //如果元素区字符数大于最大字符数，按照最大字符数截断； 
   field.value = field.value.substring(0, maxlimit), 
   countfield.value=0;
   else 
   //在记数区文本框内显示剩余的字符数； 
   countfield.value = maxlimit - field.value.length; 
   } 
   //--> 
   </SCRIPT> 
   </head> 
   <body> 
    <form name=myform action=""> 
        <textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,10);" onKeyUp="textCounter(message,remLen,10);"></textarea> 
        您还可以输入:<input name="remLen" type="text" value="10" size="5" readonly="readonly">个字符 
    </form> 
   </body> 
   </html> 

转载于:https://www.cnblogs.com/dangjianshun/p/5434579.html

weixin_33829657
关注
vue输入框textarea限制
weixin_54757930的博客
11-05 658
<el-input v-model="value" placeholder="限制" type="textarea" :rows="4" -------------限制高 maxlength="200"--------最长字符长度 :readonly="true"-------只读 resize='none' --------不可拖拽 show-word-limit--------右下角显示剩余字符长度 > </el-input> ...
jquery.chineselengthlimit:这是一个可以限制文字框（input[type='text']） 与文字输入区域（textarea） 输入中英文字数的jQuery Plugin
07-12
这是一个可以限制文字框（input[type='text']）与文字输入区域（textarea）输入中英文字数的jQuery Plugin。 Options 下面是可以调整的参数： Options Description limitCount 最大长度限制。预设值为10 。若目标...
控制textarea文本长度,并限制输入字数(带统计显示)
07-28
NULL 博文链接：https://diaoweili.iteye.com/blog/774179
vue+element中，el-input type=“textarea“ 实现自定义末端行数限制提示
最新发布
ilcn1949的博客
08-16 698
根据element 官网上的用法：有个属性是show-word-limit配合:maxlength="10000"使用，就会出现在文本框的右下角提示字数显示：已输入/最大可输入字符。但是我发现如果要实现需求图中的效果，这个属性是没办法使用的，然后看了一下相关的源码，textarea是没有这种的插槽。于是另辟蹊径，发现了一个新的写法，话不多说，直接上代码片段1。
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
JiKeYzhang's
12-16 3045
 onkeydown="textCounter(this, 1000);"   onkeyup="textCounter(this, 1000);" /**  * format chargeType.comments length  * @param field - this Object  * @param maxlimit - max length in this field  *
限制textarea文本域中输入字符个数（防粘贴）
于连·索黑尔的专栏
11-19 3035
    通常我们需要对用户文本输入进行字符数量上的限制，对于文本输入域，我们可以通过maxlength属性来限制用户可输入的最大字符数，但是textarea这种文本输入域的话我们只能通过js来控制输入字符数了，因为它没有提供maxlength属性。首先我们定义一个简单的函数，如下：/**//*** 限制textarea文本域输入的字符个数* @id        textarea表单ID*
input的type属性和textarea标签
热门推荐
kuidada的博客
03-26 1万+
input的type属性 type的值和描述 以下我只列举了text的类型和submit类型 button 定义可点击按钮（多数情况下，用于通过 JavaScript 里的事件）。 checkbox 定义复选框。常见于多选择类框 file 定义输入字段和 "浏览"按钮，供文件上传。 hidden 定义隐藏的输入字段。 image 定义图像形式的提交按钮。 password 定义密码字段。该字段中的...
jq、js 获取input、textarea文字显示的行数、对输入做限制
weixin_47127690的博客
06-07 1162
【代码】jq、js 获取input、textarea文字显示的行数、对输入做限制。
<html> <head> <title> New Document </title> </head> <body> <form method="POST" action="../0001/success.asp" name=form > <textarea cols="45" name="memo" rows="8" wrap="on" class="editbox2" onKeyDown="textCounter(this.form.memo,this.form.remLen,160);" onKeyUp="textCounter(this.form.memo,this.form.remLen,160);"></textarea> <br> 共可输入160字，还剩 <input readonly type=text name=remLen size=3 maxlength=3 value="160" class=editbox1> 字。 <br> </form> </body> </html> <script language="JavaScript"> function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit) field.value = field.value.substring(0,maxlimit); else countfield.value = maxlimit - field.value.length; } </script>解析思路
05-22
当用户在文本框中输入文字时，通过 JavaScript 脚本实现了一个字数限制功能，文本框旁边会显示还可以输入多少个字。当用户输入的文字超过了限制时，脚本会自动截取多余的部分。当用户提交表单时，数据将被发送到 ".....
详细解析思路<html> <head> <title> New Document </title> </head> <body> <form method="POST" action="../0001/success.asp" name=form > <textarea cols="45" name="memo" rows="8" wrap="on" class="editbox2" onKeyDown="textCounter(this.form.memo,this.form.remLen,160);" onKeyUp="textCounter(this.form.memo,this.form.remLen,160);"></textarea> <br> 共可输入160字，还剩 <input readonly type=text name=remLen size=3 maxlength=3 value="160" class=editbox1> 字。 <br> </form> </body> </html> <script language="JavaScript"> function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit) field.value = field.value.substring(0,maxlimit); else countfield.value = maxlimit - field.value.length; } </script>详细解析思路
05-22
当用户在输入框中输入文字时，JavaScript 代码会监测输入框的内容长度，如果超过了 160 个字符，JavaScript 代码会截断多余的字符。同时，页面上会显示一个字数统计器，用于提示用户还可以输入多少字符。该代码可以...
「input type=“text“」和「textarea」的区别
爱吃肉的洋
07-13 5045
在我们开发时经常需要用到输入框，通常解决办法就是和,那么这两个标签有什么区别呢？ 一：<input type="text"> 标签 text标签是单行文本框，不会换行。 通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。 value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。 　　 可以通过width和height设置宽高，但是也不会增加行数，下面是一个例子： <input type="text" style="wid
input type=“textarea“ 的placeholder内容穿透其他弹出层
qq_49490164的博客
05-13 520
input type=“textarea” 的placeholder内容穿透其他弹出层 首先，这个穿透问题是原生的，无法用样式改变 那么我选择最简单的方法，当其他表单弹出层显示时，隐藏textarea，完美解决！ 言简意赅上代码 html <uni-forms-item label="类型" name="dictHouseRenovation"> <uni-data-picker placeholder="请选择类型" popup-title="请选择类型" :localda
设置＜el-input type=“textarea“/＞高度
guapilixianghe的博客
03-24 9096
.el-textarea{ height:88px; :deep(.el-textarea__inner){ height: 88px; } }:deep(.el-input__wrapper){ font-size: 14px; width:100%; height:32px; }
element中＜el-input type=“textarea“ /＞高度自适应
文龙刚的博客
06-07 5498
element中高度自适应
el-input type=‘textarea’后高度设置
m0_73216899的博客
03-07 2840
wu
input type=“text“ textarea多行输入 单行输入 ＜input type=“text“＞ ＜textarea＞
tanzongbiao的专栏
02-18 1368
单行 及 选择框(下拉框) <div class="form-group row"> <label class="col-md-2 col-sm-2 text-right" for="interviewStatus">面签状态：</label> <div class="col-md-4 col-sm-4"> <select class="form-control" id="interviewStatus" name="
textarea 标签如何创建多行文本输入框？
官方推荐
08-07 5214
textarea 标签如何创建多行文本输入框？
＜textarea＞标签与＜input＞标签有何区别?
m0_74249400的博客
05-15 515
而文本域用于输入较多文本，内容可以在页面中多行显示，其语法是<textarea> </textarea>。单行文本框用于输入较少文字，文本在页面中单行显示，其语法是<input type=" text" >;<textarea>标签与<input>标签有何区别?
<!DOCTYPE html> <html> <head> <title><CS></title> </head> <body> <h3>Please enter your question.</h3> <form action="/middle" method="post"> <textarea name="text" rows="4" cols="50"></textarea> <br> <input type="submit" value="确定"> <br> </form> </body> </html> 改为居中自适应
07-11
您可以将以下 CSS 样式添加到 `<head>` 标签中的 `<style>` 标签中，以使... <input type="submit" value="确定"> <br> </form> </body> </html> ``` 这样，表单将垂直居中显示，并且文本区域的宽度将适应屏幕大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值