如何使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'

現在為了使這個工作，下載我的tweak flexibleArea.js ，將其包含在您的xhtml中，然后在文檔中准備好。

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

這是Primefaces TextArea靈活的現場演示 ，以及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具有屬性“autoResize = true”。因此，如果需要編輯，在鍵入內容后，該組件將適合您的文本。