JS简单限制textarea内输入字符数量的方法


Posted in Javascript onOctober 14, 2015

本文实例讲述了JS简单限制textarea内输入字符数量的方法。分享给大家供大家参考。具体如下:

这里演示JS限制一个area内的字符不能超过255,多余则截取。

代码如下:

<script> 
function getStringUTFLength(str) { 
 var value = str.replace(/[\u4e00-\u9fa5]/g," ");
 //将汉字替换为两个空格
 return value.length; 
} 
function leftUTFString(str,len) { 
 if(getStringUTFLength(str)<=len) { 
  return str; 
 }
 var value = str.substring(0,len); 
 while(getStringUTFLength(value)>len) { 
  value = value.substring(0,value.length-1); 
 } 
 return value; 
} 
function count() { 
 var len=255;
 var value = document.getElementById("licenseother").value; 
 if(getStringUTFLength(value)>=len) {  
  document.getElementById("licenseother").value = leftUTFString(document.getElementById("licenseother").value,len); 
 } 
 document.getElementById("result").value = len-getStringUTFLength(document.getElementById("licenseother").value); 
} 
</script> 
<table width="100%"> 
 <tr>
  <td> 
   <textarea cols=100 rows=4 id="licenseother" onkeypress="count()" onkeyup="count()" onblur="count();" onChange="count();"></textarea> 
  </td>
 </tr> 
 <tr>
  <td> 
   本输入框限制输入255个字符(汉字计算为2个字符)  剩余字符数:
   <input readonly type="text" size="3" id="result" value="255"> 
  </td>
 </tr> 
</table>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 #Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 #Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 #Javascript
JS更改select内option属性的方法
Oct 14 #Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 #Javascript
JS实现的最简Table选项卡效果
Oct 14 #Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 #Javascript
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
两个php日期控制类实例
2014/12/09 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Python实现ATM系统
2020/02/17 Python
Python如何给函数库增加日志功能
2020/08/04 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
python遍历路径破解表单的示例
2020/11/21 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
大学生创业感言
2014/01/25 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
疾病捐款倡议书
2014/05/13 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
党校学习心得体会范文
2014/09/09 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
2014年度思想工作总结
2014/11/27 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
如何写好闭幕词
2019/04/02 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS