CODEWITHSUNDEEP
jsfprimefaces
Ahmet
Ahmet

Reputation: 968

p:inputtextarea remaining line

I have a use case to limit the number of lines in a p:inputTextarea the user can enter, like remaining chars.

In my case, I need to limit the lines to 35, which can be done in the bean and displayed a message but I think the best practice is the client-side validation.

Thank you.

Upvotes: 0

Views: 434

Answers (2)

Ahmet
Ahmet

Reputation: 968

This is what I have come up so far; thank you guys for the ideas. Please let me know if I am going to the wrong direction.

I am basically dropping the text after the max allowed line. Of course, I am doing my server-side validation, too.

Facelet side:

<p:inputTextarea
    id="description"
    value="#{myBean.model.description}"
    title="Maximum 35 lines are allowed"
    onchange="newLineCheck(this, 35)"
    maxlength="2065"
    counter="display"
    counterTemplate="{0} characters remaining."
    style="text-transform: uppercase;" />

<h:outputText
    id="display"
    style="display: block; color: grey;" />

Javascript function:

function newLineCheck(element, maxLine) {
    var delim = "\n";
    var txt = element.value.replace("\r", ""); // strip carriage returns
    var arr = txt.split(delim);

    if(arr.length > maxLine) {
        element.value = arr.slice(0, maxLine).join(delim); // set element text up to max delimiter
    }
}

Thank you.

Upvotes: 0

tsotzolas
tsotzolas

Reputation: 397

Jquery is not my strong point but I have a working example.

Javascript code: 

   <script type="text/javascript">
    var imax = 36;
    function bindiframe() {
        //ql-editor is the class from textEditor
        $('.ql-editor').on('keyup', function (e) {
        //Find the <p> that we have in text
            ilength = $('.ql-editor').find('p').length;
            $('#txt').html('Remain lines:' + (imax - ilength));
            if ((imax - ilength) &lt; 0) {
                rctrue();
            } else {
                rcfalse();
            }
        });
    }
   </script>

Xhtml code:

  <p:remoteCommand name="rcfalse" update="sendbutton"
                 actionListener="#{MessagesBean.disableButton(false)}"/>
  <p:remoteCommand name="rctrue" update="sendbutton"
                 actionListener="#{MessagesBean.disableButton(true)}"/>
    <p:textEditor id="messagetxt"
                      value="#{MessagesBean.newmessageText}"
                      height="200" style="margin-bottom:10px"
                      placeholder="Enter your content"
                      onchange="bindiframe()"
        >
            <f:facet name="toolbar">
                    <span class="ql-formats">
                       <button class="ql-bold"/>
                       <button class="ql-italic"/>
                       <button class="ql-underline"/>
                       <button class="ql-strike"/>
                    </span>
                <span class="ql-formats">
                    <select class="ql-color"/>
                    <select class="ql-background"/>
                </span>
                <span class="ql-formats">
                     <button class="ql-clean"/>
                </span>
            </f:facet>
        </p:textEditor>
        <h:outputText id="txt1"/>
       <p:commandButton
           id="sendbutton"
           actionListener="#{MessagesBean.sendNewMessage}"
           disabled="#{MessagesBean.disableSendButton}"
           value="Send Message">
       </p:commandButton>

Bean Code:

    public void disableButton(Boolean bool){
    disableSendButton = bool;
   }

In my example, if the user writes more than 36 lines the send button becomes disabled. The bad think is that you have a lot ajax calls in that example. Maybe you must try to disable the button via javascript.

Upvotes: 0

Related Questions