wanliyuan

    今天在修改v5后台的比赛系统时,发现文本框需要限制输入字数。我们这个系统用的是3.6.3版本的,前台代码是这样的

    

<script>
           //编辑器
        CKEDITOR.replace(\'matchContent\',{
        resize_enabled : false,  //是否窗口可以扩展
            sharedSpaces :
            {
                    top : \'topSpace\',
                    bottom : \'bottomSpace\'
            },
        toolbar :[
            [\'Cut\',\'Copy\',\'Paste\',\'PasteText\',\'-\'], 
            [\'Undo\', \'Redo\', \'-\', ,\'Find\',\'SelectAll\', \'RemoveFormat\'], 
            //加粗 斜体, 下划线 穿过线 下标字 上标字
            [\'Bold\',\'Italic\',\'Underline\',\'Strike\'],
            //数字列表 实体列表 减小缩进 增大缩进
            [\'NumberedList\',\'BulletedList\',\'-\',\'Outdent\',\'Indent\'],
            //左对齐 居中对齐 右对齐 两端对齐
            [\'JustifyLeft\',\'JustifyCenter\',\'JustifyRight\',\'JustifyBlock\'],
            //图片 flash 表格 水平线 表情 特殊字符 分页符
            [\'Image\',\'Table\',\'HorizontalRule\',\'SpecialChar\'],
            //样式 格式 字体 字体大小
            [\'Styles\',\'Format\',\'Font\',\'FontSize\'],
            //文本颜色 背景颜色
            [\'TextColor\',\'BGColor\'],
            ],
         height:150     
        },
    {
    type : \'textarea\',
    id : \'message\',
    label : \'Your comment\',
    \'default\' : \'\',
    validate : function() {
        if ( this.getValue().length < 5 )
        {
            api.openMsgDialog( \'The comment is too short.\' );
            return false;
        }
    }
}
    );
    
     </script>

 

经过不断的尝试,最终采用CKEDITOR.instances.matchContent.getData().length,这就是这个输入框的文字长度,然后给它添加一段javascript即可。请主要matchContent就是上面的代码中定义的,所以要注意更改。

 

 

而这儿继而又延伸出两个问题,第一个就是,虽然CKEDITOR.instances.matchContent.getData()可以取出我们输入的内容,但是里面会包括html标签(例如<p>123</p>),故而我们要写一段javascript来过滤html标签——filterHtml函数;其二就是如何计算字符,而我们定下来的规则则是(中文2个字符,英文1个字符)——strleng函数

 

具体代码如下。

 

else if (strlen(filterHtml(CKEDITOR.instances.matchContent.getData()))>600){
                alert("比赛介绍不能超过300字");
                return false;
            }

 

filterHtml函数和strleng函数 请见下一篇文章

分类:

技术点:

相关文章:

  • 2021-12-24
  • 2022-12-23
  • 2022-12-23
  • 2021-11-23
  • 2021-09-04
  • 2021-10-08
  • 2022-01-02
  • 2021-11-23
猜你喜欢
  • 2021-12-25
  • 2021-12-25
  • 2021-07-29
  • 2022-01-07
  • 2022-02-19
  • 2021-04-19
相关资源
相似解决方案