jQuery TextExt:最大高度和滚动条

jQuery TextExt: max height and scrollbar

本文关键字:高度 滚动条 TextExt jQuery      更新时间:2023-09-26

我正在使用jQuery TextExt插件(http://textextjs.com/)创建一个输入字段,用户可以在其中输入语言作为标签,类似于Facebook输入标签的方式。

总的来说,该插件效果很好。

然而,我

遇到了一个障碍,我似乎无法克服。我在输入字段上使用 TextExt,如下所示:

<script type="text/javascript">
    $('#id_languages').textext({
    plugins : 'tags prompt suggestions arrow autocomplete',
    tagsItems : ['English'],
    suggestions : languages, //variable set earlier
    prompt : 'Add more here...',
});
</script>

这应该工作。现在,我添加的标签越多,输入字段的增长就越多(如预期的那样)。

但是,在某些时候,它会超出我给定布局中可接受的高度。

有没有一种使用 TextExt 指定输入元素的最大高度并添加垂直滚动条的工作方法,而无需在带有滚动条的div 内弹出"建议"下拉列表?

我希望这是有道理的,我现在自己有点困惑。

我已经

检查了源代码,没有地方可以更改它来完成您需要的东西,而无需黑客攻击。

最接近的答案是限制每个输入的标签数量,这可以是按照这里描述完成: 如何限制 textExt 插件的输入总数?

   $('#id_languages').textext({
                plugins : 'tags autocomplete',
                tagsItems : Sourcearray,
                ext: {
                   tags: {
                     addTags: function(tags) {
                         if(checkLength()) {
                            $.fn.textext.TextExtTags.prototype.addTags.apply(this, arguments);
                         }
                     }
                   }
                 }
   });

这是验证函数checkLength()

function checkLength(){
   if($("#id_languages").next().children().length < 4){
      return true;
   }
  return false;
}

其中数字 4 是允许的标签数。

如果这不能令人满意,您将不得不入侵textext.core.jstextext.plugin.tags.js并寻找以下功能:

invalidateBounds()preInvalidate()postInvalidate(),玩高度操纵。