- 浏览: 230714 次
- 性别:
- 来自: 河北
文章分类
- 全部博客 (100)
- web前端 (17)
- javascript (12)
- 有关hibernate (3)
- 有关struts2 (8)
- java基础 (9)
- 非技术,日常应用 (7)
- Ajax (1)
- css (2)
- Oracle (1)
- 面试题收藏 (6)
- jQuery (5)
- js (11)
- 有关sql (1)
- sql (3)
- MySql (2)
- spring (1)
- ssh (1)
- jFreeChart (1)
- jExcel (2)
- Castor (1)
- 常见异常总结 (9)
- freemarker (2)
- ibatis (1)
- DB2 (2)
- 休闲娱乐 (2)
- java文件和文件夹的操作 (3)
- javaFile (3)
- ExtJs (3)
- EasyUI (3)
- 正则 (1)
- object (1)
- ftp (1)
最新评论
-
yinianjingzi:
是十分舒服撒反对分十 ...
KindEditor 4 输入框限定字数 -
bao梦:
zhang5476499 写道博主,前端的jsp页面怎么取出m ...
ModelMap和ModelAndView的作用 -
hiberk:
zhang5476499 写道博主,前端的jsp页面怎么取出m ...
ModelMap和ModelAndView的作用 -
zhang5476499:
博主,前端的jsp页面怎么取出modelmap的数据?从req ...
ModelMap和ModelAndView的作用 -
lr1990420:
...
ModelMap和ModelAndView的作用
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>
评论
发表评论
-
实现tab标签切换效果
2016-06-28 17:00 953<title>DIV层切换</title& ... -
浏览器屏蔽右键(右击)功能
2016-04-20 16:19 577//屏蔽浏览器右键 function stop(){ ... -
js 动态添加行
2016-04-14 11:14 615<html> <head> &l ... -
JS截取字符串substr 和 substring方法的区别
2015-11-04 10:12 574substr 方法返回一个从指定位置开始的指定长度的子字符串。 ... -
html(jsp)中<object>播放视频
2015-03-11 14:00 486<OBJECT id="myPlayer&q ... -
js设置延时和定时器
2015-01-22 16:44 1013JS里设定延时:使用SetInterval和设定延时函数 ... -
在jsp页面截取字符串
2014-12-10 11:27 810第一步 导入包 <%@ taglib uri=&quo ... -
jquery-控制div的显示与隐藏
2014-07-16 14:46 712$("#id").show()表示disp ... -
修改fckeditor编辑器中的文字大小
2014-07-04 14:08 852修改编辑器目录下的样式文件 css/fck_editorar ... -
js 超链接(a便签)的写法
2014-06-17 16:56 968"<a href='javascript:v ... -
easyui 清空表格数据
2014-05-23 15:03 1024$('#tableId').datagrid('loadDat ... -
多附件上传
2014-05-06 11:00 951<!DOCTYPE HTML PUBLIC " ... -
正则的用法
2013-12-10 11:08 605匹配数字为例: input 为要做匹配的内容 //正则 ... -
java文本框输入自动补全功能
2012-12-20 11:16 4846下面是一个java文本框自动补全的例子 <font ... -
KindEditor 工具栏配置
2012-08-31 14:52 2006KindEditor编辑相对于FCK来说个人感觉更加的简便,使 ... -
kindeditor在线编辑器使用说明
2012-08-11 13:22 1376简单使用方法 1. 下载KindEditor最新版本。 下 ... -
http 错误代码介绍
2012-02-03 15:05 878HTTP 400 - 请求无效 HTTP 401.1 - 未授 ... -
JDBC,Hibernate 分页怎样实现?
2012-01-27 16:46 11051) Hibernate 的分页:Query query = ... -
fmt格式化时间
2012-01-18 11:54 968<fmt:formatNumber value=&q ... -
jstl自定义标签
2011-11-21 13:36 1035自定义标签的步骤: 定义类和方法(方法必须是public ...
相关推荐
KindEditor4是一款功能丰富的网页文本编辑器,常用于网站内容管理系统的富文本输入框,它提供了类似Microsoft Word的编辑体验,使得用户可以在网页上进行图文混排、格式调整、链接插入等操作。而"KindEditor4+web...
KindEditor 4_x Documentation
在"kindeditor4.x for asp.net完整配置"这个资源中,包含的是KindEditor的最新4.x版本,针对ASP.NET进行了优化和配置,确保开发者能够快速地在.NET环境中集成并使用。此版本可能包含了以下关键组件和特性: 1. **主...
【标题】"富文本编辑框asp.net mvc功能源码kindeditor4"指的是在ASP.NET MVC框架下,使用KindEditor4这一开源富文本编辑器实现的功能完善的代码示例。KindEditor是一款广泛应用于Web开发中的轻量级、高性能的富文本...
### kindeditor4网页编辑器使用说明 #### 一、简介 `kindeditor4.1.11`是一款功能强大且易用的网页编辑器,它提供了丰富的文本编辑功能,适用于各种在线编辑场景,如博客、论坛、CMS系统等。本文将详细介绍如何在...
KindEditor 是一款功能丰富的网页文本编辑器,常用于网站内容管理系统的富文本输入框。它提供了多种特性,如图片上传、链接插入、表格编辑等,让非技术人员也能方便地编辑带有格式的HTML内容。KindEditor_4.x 帮助...
KindEditor4.x 官方帮助文档.官方最新的web编辑器. 官方没有下载的帮助文档。只有在线浏览的。本人下载出来做成了chm格式的。给大家下载。方便查阅!!!!!!
本文件夹压缩包包含kindeditor运行包,demo.html演示文档,JS目录(包含jQuery库) 使用浏览器运行demo.html文件,即可展示运行效果,效果包含两个方面 1.实时统计富文本编辑器输入的字符数 2.实时通过div显示富...
4. **初始化**:在 JavaScript 中调用 `KindEditor.create()` 方法来实例化编辑器,指定编辑器将附着的 DOM 元素,以及自定义配置项。 5. **配置**:你可以根据需求自定义编辑器的外观和行为,例如设置初始内容、...
KindEditor是一款广泛应用于网页编辑器的开源项目,它旨在提供用户友好的“所见即所得”(WYSIWYG)编辑体验。通过集成KindEditor,网站管理员可以让访客轻松地编辑和格式化文本,添加图片,甚至插入网络视频,极大...
富文本编辑器与普通的文本输入框不同,它允许用户进行格式化文本操作,如加粗、斜体、下划线、插入图片、超链接、表格等,极大地提高了在线内容创作的效率。 2. **KindEditor的特点**: - **跨平台**:KindEditor...
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...
4. **height**:编辑器的高度,仅支持像素单位,优先级高于TEXTAREA的CSS高度。 5. **minWidth**与**minHeight**:分别设置编辑器的最小宽度和最小高度,单位均为像素。 6. **filterMode**:决定是否过滤HTML代码,...
4. **跨浏览器兼容**: 针对不同的浏览器环境,KindEditor进行了优化,确保在主流的浏览器如Chrome、Firefox、Safari、Edge以及旧版本的Internet Explorer中都能正常工作,这极大地拓宽了它的适用范围。 5. **API...
而KindEditor则是一个轻量级的在线文本编辑器,常用于网页中的富文本输入框,支持图片上传、链接插入等常见编辑功能。 在这个"Extjs+Kindeditor的例子"中,我们可以预期看到如何将这两个工具结合使用,为用户提供一...
KindEditor 是一套开源的国产在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 ...
KindEditor 4.X改进了性能和用户体验,增加了更多的插件支持,而ExtJS 3.1是一个较老但稳定的版本,广泛应用于许多项目中。 标签"Extjs kindedit"强调了这个主题的核心是关于这两个技术的集成。在实际项目中,这种...
4. **许可证信息**:`license.txt` 文件包含了软件的许可协议,规定了使用 KindEditor 的条件和限制。 5. **插件支持**:`plugins` 文件夹包含了各种插件,比如截图功能可能就包含在这里。这些插件可以扩展编辑器的...
4. **调用KindEditor**:在页面中添加以下JavaScript代码来初始化编辑器。 ```javascript <script charset="utf-8" src="/editor/kindeditor.js"> KE.show({ id: 'your_editor_id' }); ``` 除了设置`id`...