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 API学Jquery 之二 属性
Apr 09 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
项目实践之javascript技巧
2007/12/06 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python动态加载变量示例分享
2014/02/17 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python装饰器的特性原理详解
2019/12/25 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
New delete 与malloc free 的联系与区别
2013/02/04 面试题
MIS软件工程师的面试题
2016/04/22 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
护理工作感言
2014/01/16 职场文书
中学运动会广播稿
2014/01/19 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
考研英语辞职信
2015/05/13 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python