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和DOM Interfaces来处理HTML
Oct 09 Javascript
js 图片轮播(5张图片)
Dec 30 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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使用google地图应用实例
2014/12/31 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python AES加密模块用法分析
2017/05/22 Python
详解python配置虚拟环境
2019/04/08 Python
python通过http下载文件的方法详解
2019/07/26 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
管理信息系学生的自我评价
2014/01/11 职场文书
小学评语大全
2014/04/22 职场文书
法律专业自荐信
2014/06/03 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
横店影视城导游词
2015/02/06 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
安全教育主题班会教案
2015/08/12 职场文书