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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

    [Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <textarea name="message" cols="96" rows="5" onKeyDown="textCounter(message,remLen,65);" onKeyUp="textCounter(mess

  • js监听鼠标事件控制textarea输入字符串的个数

    [Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <textarea name="message" cols="96" rows="5" onKeyDown="textCounter(message,remLen,65);" onKeyUp="textCounter(mess

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

    本文实例讲述了JS简单限制textarea内输入字符数量的方法.分享给大家供大家参考.具体如下: 这里演示JS限制一个area内的字符不能超过255,多余则截取. 代码如下: <script> function getStringUTFLength(str) { var value = str.replace(/[\u4e00-\u9fa5]/g," "); //将汉字替换为两个空格 return value.length; } function leftUTFString

  • jQuery实现限制textarea文本框输入字符数量的方法

    本文实例讲述了jQuery实现限制textarea文本框输入字符数量的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }); function setCount(src, elem) { var chars = src.value.lengt

  • JS实现选择TextArea内文本的方法

    本文实例讲述了JS实现选择TextArea内文本的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript"> function select_field(id){ document.getElementById(id).focus(); document.getElementById(id).select(); } function init(){ select_field('text1'); } onload=init;

  • JS实现区分中英文并统计字符个数的方法示例

    JS实现区分中英文并统计字符个数的方法示例

    本文实例讲述了JS实现区分中英文并统计字符个数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js区分中英文统计字符个数</titl

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

  • JS动态修改iframe内嵌网页地址的方法

    本文实例讲述了JS动态修改iframe内嵌网页地址的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过修改iframe的src属性动态修改iframe的内嵌网页 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myframe").src="http://google.com"; }

  • Android EditText限制输入字符类型的方法总结

    Android EditText限制输入字符类型的方法总结 前言: 最近的项目上需要限制EditText输入字符的类型,就把可以实现这个功能的方法整理了一下: 1.第一种方式是通过EditText的inputType来实现,可以通过xml或者Java文件来设置.假如我要设置为显示密码的形式,可以像下面这样设置: 在xml中 Android:inputType="textPassword" 在java文件中,可以用 myEditText.setInputType(InputType.TY

  • JS简单生成两个数字之间随机数的方法

    JS简单生成两个数字之间随机数的方法

    本文实例讲述了JS简单生成两个数字之间随机数的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • JS简单模拟触发按钮点击功能的方法

    本文实例讲述了JS简单模拟触发按钮点击功能的方法.分享给大家供大家参考,具体如下: <html> <head> <title>usually function</title> </head> <script> function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); document.getElementById(&qu

  • JS简单实现城市二级联动选择插件的方法

    JS简单实现城市二级联动选择插件的方法

    本文实例讲述了JS简单实现城市二级联动选择插件的方法.分享给大家供大家参考.具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的.本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/ 具体代码如下: <htm

随机推荐