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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
javascript中Function类型详解
Apr 28 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 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
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
Nginx实现反向代理
2017/09/20 Servers
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python实现多线程抓取知乎用户
2016/12/12 Python
vscode 远程调试python的方法
2017/12/01 Python
python读取文件名并改名字的实例
2019/01/07 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
费用会计岗位职责
2014/01/01 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis