当前位置: 代码迷 >> Web前端 >> KindEditor 四 输入框限定字数
  详细解决方案

KindEditor 四 输入框限定字数

热度:844   发布时间:2012-11-23 22:54:33.0
KindEditor 4 输入框限定字数

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>

?

<h1>HYZX? 默认</h1>
<form name="example" method="post" action="demo-default.php">
? <textarea name="content1" id="content1" style="width:700px;height:200px;visibility:hidden;">000000000</textarea>
? <br />
<br>
<br>

? <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>

  相关解决方案