制作像“Backspace”一样的 JSF 按钮和“输入” inputTextArea 的键？

Question

更新：为了清楚起见，我在这里进行了更新，而不是在评论中写入或发表答案。

这是这些按钮将如何操作的代码的一部分：

我制作了这样的按钮：

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

textArea：

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

我制作了一些简单的按钮，这些按钮会将它们的值写入 textArea，以便用户在构建公式时看到公式：

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

I我不完全确定我放在那里的 ajax 部分，用它来停止每次点击时的页面刷新。

我使用的 selectBox 现在有一些硬编码值，但最终将填充从 WS 获取的数据。

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

现在，如果我将 textArea 禁用或只读，我仍然可以在其中写入 selctBoxes 的内容（这很好），但是如果我尝试像“+”这样的简单按钮，它们的值将很快出现然后消失一样快。如果我尝试退格键，它将删除文本区域的全部内容，如果我将选择框的一些内容放入文本区域，然后如果我单击“+”按钮（例如），则删除文本区域的全部内容区域将被删除。我仍在深入研究代码，看看是什么导致了它的行为方式:)

更新结束

是否可以在 JSF 中制作一些命令按钮，这些按钮将在 inputTextArea 上进行操作，就像“Enter”和“Backspace”键？例如：

按下“输入按钮”时，会将光标移动到文本区域的新行。 “退格按钮”将删除光标后面的下一个字母或空格。

我已经搜索了一段时间，但我似乎只找到了如何使所有文本消失的详细信息。

谢谢， 丹尼尔

Answer 1

您可以使用 JavaScript 来完成此操作。

例如

<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}')" />

具有这些功能

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