Javascript 单击jsf更改可见性

我想在用户单击文本时使文本可编辑

所以我想我可以通过两个组件来实现这一点

        <h:outputText id="description_" value="#{cc.attrs.description}" /> 

        <h:inputText id="description" value="#{cc.attrs.description}" />

现在的问题是，两个组件同时显示。我希望h:inputText将被隐藏/折叠。当用户单击h:outputText时，h:outputText应隐藏，h:inputText应显示，以便用户可以编辑输入中的文本。如果h:inputText失去焦点，则应显示h:outputText并隐藏h:inputText

---

有JSF解决方案吗？

一种解决方案是使用或使用h:outputLabel和ajax。

我将

包装在

中，并使用普通JavaScript进行隐藏/显示工作，因此，不需要任何ajax调用。您需要在blur上提交吗？我将添加到@Luiggi Mendoza中。如何在纯js中实现这一点？