Question

UPDATE: I updated here for clarity, instead of writing in the comments or making an answer post.

This is a piece of how the code those buttons will operate upon looks:

I made the buttons like this:

  <h:commandButton value="Delete"  onclick="return addBackspace();">
                    <f:ajax execute="@form" render="formula"/>
                </h:commandButton> //the backspace button

The textArea:

 <h:inputTextarea id="formula" value="#{output.formula}" /> 

I made some simple buttons which would write their value to the textArea so the user sees the formula as he builds it:

 <h:commandButton value="+ "  onclick="return checkButtons(this.value);">                   
                    <f:ajax execute="@form" render="formula"/>
                </h:commandButton>

I’m not entirely sure about the ajax part i put in there, used it to stop the page refresh on every click.

And the selectBoxes I use which have some hardcoded values now but will eventually be filled with data taken from a WS.

 Property:
                <h:selectOneMenu  value ="#{output.propertyReferenceValue}" id="selectTwo" onchange="return checkItem(this.value);">    
                    <f:selectItems value="#{property.propertyReference.keySet()}"/> 
                </h:selectOneMenu>

Now if i make the textArea disabled or readOnly, I’m still able to write the content of the selctBoxes in it(which is good) but if i try the simple buttons like “+” their value will just appear quickly and then dissapear just as fast. If i try the backspace , it will delete the whole content of the textArea, same if i put some of the content of the selectboxes in the textArea and then if I click the “+” button (for example), the whole content of the area will be deleted. I’m still digging through the code to see what it is that makes it behave this way 🙂

END OF UPDATE

Would it be possible to make some commandButtons in JSF which will operate on an inputTextArea just like the “Enter” and “Backspace” keys? For example:

The “Enter Button” when pressed, will move the cursor to a new line of the textArea.
The “Backspace Button” will delete the next letter or space which is behind the cursor.

I’ve been searching for a while , but i seem to find only details on how to make all the text dissapear.

Thanks,
Daniel

Answer 1

You could just use JavaScript for this.

E.g.

<h:inputTextarea id="textarea" binding="#{textarea}" value="#{bean.text}" />
<input type="button" value="Enter" onclick="addEnter('#{textarea.clientId}')" />
<input type="button" value="Backspace" onclick="addBackspace('#{textarea.clientId}')" />

with those functions

function addEnter(textareaId) {
    var textarea = document.getElementById(textareaId);
    textarea.value += '\n';
    textarea.focus();
}

function addBackspace(textareaId) {
    var textarea = document.getElementById(textareaId);
    textarea.value = textarea.value.substring(0, textarea.value.length - 1);
    textarea.focus();
}