jquery KindEditor 4 输入框(textarea) 限定字数

代码直接复制就行,如下:

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

发表评论

电子邮件地址不会被公开。