Action on the button to center text

Question

Someone could help me as I could do so when I type any text into an input, then I have a button on top of my input in which I want to center this typed text. Could someone help me like I can do?

Here is the button I want you to do the action on (how to center my text):

<p:commandLink id="btn_close_users_modal33"
               styleClass="btn btn-default" action="">
    <i class="fa  fa-align-center fa-fw" />
</p:commandLink>

And here is my input when I type the text, I want to select what was typed and click on the button to do the action of centering the text:

 <h:inputText value="#{frameBean.editorText1}" autocomplete="off"
              styleClass="form-control" tabindex="0"/>

Answer 1

You can use jQuery to add the class text-center from Bootstrap to input.

For example:

Javascript and jQuery

<script>
    function centralizar(){
        $(".input-centralizar").addClass("text-center");
    }
<script>

I used .input-centralizar representing the input that has this CSS class. I used CSS class in this example because it might be that your <h:form> don’t be with prependId="false", because when you are true (standard) all child elements of that form receive the id of form automatically makes it impossible to get to the element by its id.

The link of action

<p:commandLink id="btn_close_users_modal33" onclick="centralizar()"
           styleClass="btn btn-default" action="">
    <i class="fa  fa-align-center fa-fw" />
</p:commandLink>

<h:inputText value="#{frameBean.editorText1}" autocomplete="off"
          styleClass="form-control input-centralizar" tabindex="0"/>