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 相关文章推荐
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
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
一个MYSQL操作类
2006/11/16 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JS原型与继承操作示例
2019/05/09 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python基础教程之五种数据类型详解
2017/01/12 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
八年级数学教学反思
2014/01/31 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
合理化建议书范文
2015/09/14 职场文书