Java 如何使primefaces inputTextArea 适合文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21256141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-13 07:42:55  来源:igfitidea点击:

How to make primefaces inputTextArea fit to text?

javacssjsfjakarta-eeprimefaces

提问by user2377971

i'm trying to make <p:inputTextArea/>looks better, now when page is loaded i can see: enter image description here

我正在努力让<p:inputTextArea/>外观更好看,现在当页面加载时,我可以看到:在此处输入图片说明

and when i click that TextArea: enter image description here

当我点击它时TextArea在此处输入图片说明

here is the code:
<p:inputTextarea rows="6" value="#{bean.object.value}"style="width: 100%;" />

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

How can i make that area would adjust its size to text ? rows="6"is working for a little data but it looks terrible when more chars are written

我怎样才能使该区域将其大小调整为文本?rows="6"正在处理少量数据,但写入更多字符时看起来很糟糕

采纳答案by Hatem Alimam

I'd solve my problem with this plugin flexibleArea.js, but if you download it it won't fix the first time you focus on the textArea, so I had to tweak it a bit.

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

I have added to the bind a new event which is focus.

我在绑定中添加了一个新事件,它是焦点。

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

Now to get this working, download my tweak flexibleArea.js, include it in your xhtml, then in the document ready.

现在要使其正常工作,请下载我的调整flexibleArea.js,将其包含在您的 xhtml 中,然后在准备好的文档中。

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

And Here's a live demoon Primefaces TextArea flexible, and on github.

这是关于 Primefaces TextArea flexible 和github的现场演示

Hope this Helps.

希望这可以帮助。

回答by JavaG

I've found that the best way is to dynamically set the rows attribute based on the existing bean string length. You'll need to set columns which is worth it to accomplish the goal.

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

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

回答by Brother

I had the same problem today. Counting cols only works if the user don't type line-breaks. After looking for a best solution I solved my case this way:

我今天遇到了同样的问题。仅当用户不输入换行符时,计算列数才有效。在寻找最佳解决方案后,我以这种方式解决了我的案例:

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

And in MyController:

在 MyController 中:

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

By default, the inputTextarea has the attribute "autoResize=true".So, if you need to edit, after you type something, the component will fit your text.

默认情况下,inputTextarea 具有属性“autoResize=true”。因此,如果您需要编辑,在您输入内容后,该组件将适合您的文本。

回答by Rodrigo

Self explanatory code:

自解释代码:

<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;
    }

Edit: This will not work for every case, because of the size of the text, but for me, it's enough.

编辑:由于文本的大小,这不适用于每种情况,但对我来说,这已经足够了。