KindEditor 4 输入框限定字数博客分类： jsweb前端

程序员文章站 2024-03-25 18:51:58

...

jquery 1.6.4

html 代码：

<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KindEditor 4 输入框限定字数</title>
<script charset="utf-8" src="../jquery-1.6.4.min.js"></script>
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script type="text/javascript">
//KindEditor
$(function() {
  var editor = KindEditor.create('textarea[name="content1"]',{
   resizeType : 0, // 2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
   themeType : 'simple', //指定主题风格，可设置”default”、”simple” 指定simple时需要引入simple.css
   height : '500px',
   readonlyMode : false, //只读模式默认为false
   allowFileManager : true, //显示浏览远程服务器按钮
   afterChange : function() {
      $('.word_count1').html(this.count()); //字数统计包含HTML代码
      $('.word_count2').html(this.count('text'));  //字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字
      //////////
      //限制字数
      var limitNum = 100; //设定限制字数
      var pattern = '还可以输入' + limitNum + '字';
      $('.word_surplus').html(pattern); //输入显示
      if(this.count('text') > limitNum) {
       pattern = ('字数超过限制，请适当删除部分内容');
       //超过字数限制自动截取
       var strValue = editor.text();
       strValue = strValue.substring(0,limitNum);
       editor.text(strValue);
       } else {
       //计算剩余字数
       var result = limitNum - this.count('text');
       pattern = '还可以输入' + result + '字';
       }
       $('.word_surplus').html(pattern); //输入显示
      ////////
     }
   });

});

</script>
</head>

<body>

<input type="submit" name="button" value="提交内容" />
</form>
<br>
<p> 您当前输入了 <span class="word_count1">0</span> 个文字。（字数统计包含HTML代码。）<br />
您当前输入了 <span class="word_count2">0</span> 个文字。（字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字。）<br>
<span class="word_surplus"></span>
</p>
<br>
</body>
</html>

上一篇： Linux网络流量实时监控ifstat iftop命令详解博客分类： linux

下一篇：阿里云服务器安装配置mysql 5.7

KindEditor 4 输入框限定字数 博客分类： jsweb前端