如何使primefaces inputTextArea适合文本？

Question

我正在尝试让<p:inputTextArea/>看起来更好，现在当页面加载时我可以看到：

当我点击TextArea时：

这是代码：
<p:inputTextarea rows="6" value="#{bean.object.value}"style="width: 100%;" />

如何让该区域调整文字大小？ rows="6"正在处理一些小数据，但是当编写更多字符时它看起来很糟糕

Answer 1

我用这个插件flexibleArea.js解决了我的问题，但如果你下载它就不会在第一次关注textArea时修复，所以我不得不稍微调整一下。

我已经在bind中添加了一个焦点新事件。

$textarea.bind('keyup change cut paste focus'

现在要开始工作，请下载我的调整flexibleArea.js，将其包含在您的xhtml中，然后将其包含在文档中。

$(function() {         
   $('.ui-inputtextarea').flexible();    
});

这是Primefaces TextArea的实时demo灵活，github。

希望这有助于。

Answer 2

自解释代码：

<p:inputTextarea
    rows="#{myBean.numberOfLines(myBean.myClass.theString, 70)}"
    cols="70"
    value="#{myBean.myClass.theString}"
    autoResize="true" />

public int numberOfLines(String string, int cols) {
        int rvalue = 0;
        for (String strTmp : string.split("\n")) {
            rvalue ++;
            rvalue += strTmp.length() >= cols ? strTmp.length() / cols : 0;
        }
        return rvalue;
    }

编辑：这不适用于所有情况，因为文字的大小，但对我来说，它已经足够了。

Answer 3

我发现最好的方法是根据现有的bean字符串长度动态设置rows属性。您需要设置值得完成目标的列。

rows="#{2 + bean.string.length()/100}" cols="100"

Answer 4

我今天遇到了同样的问题。只有在用户不输入换行符时才计算cols。在寻找最佳解决方案后，我以这种方式解决了我的问题：

<p:inputTextarea
        value="#{comment.body}" 
        styleClass="no-border" readonly="true"
        style="width: 80%;height: 100%;"
        rows="#{myController.countChar(comment.body)+2}" />

在MyController中：

public int countChar(String text) {
    return StringUtils.countMatches(text, "\n");
}

默认情况下，inputTextarea具有属性＆＃34; autoResize = true＆＃34;。因此，如果您需要编辑，在键入内容后，该组件将适合您的文本。