键入时更新 p:inputText 样式答案

【问题标题】：Update p:inputText style while typing键入时更新 p:inputText 样式
【发布时间】：2020-03-04 16:40:59
【问题描述】：

如何在用户输入时更新p:inputText 的样式而不中断他们的输入？

<p:inputText id="radiusValue" value="#{bean.radius}"
            styleClass="#{bean.radiusStyle}">
            <p:ajax event="keyup" update="radiusValue" />
</p:inputText>

这是为了验证。它可以正常更新并获得正确的样式，但是当p:inputText 更新时，它会将光标设置回开头...中断用户的输入。必须有一种侵入性较小的方式来更新样式？

【问题讨论】：

#{bean.radiusStyle} 到底发生了什么？
并且使用它进行验证是“错误的”，因为它不是真正的 jsf/bean 验证，而是（最有可能）检查一个 setter 并在那里设置一个样式。这是错误/紧密耦合的实现，应该迁移到真正的 bean 验证。 PrimeFaces 可以在它的客户端验证中使用它，这很棒。实际上你有一个'xyproblem.info'
@JasperdeVries 如果半径通过验证然后“”，如果没有则返回错误样式。
@Kukeltje：我愿意接受建议。在不重置整个控件的情况下将盒子变成红色似乎不像火箭科学。 “真正的 bean 验证”是什么意思？
我今天会写一个包含相关部分的摘要答案。确实不需要“综合文档”。你会看到

标签： jsf primefaces

【解决方案1】：

您能在客户端上进行验证吗？我没试过，但是你可以使用onkeyup属性来执行一个Javascript函数，根据你的需要添加一个样式类。

function applyStyle() {
    var element = document.getElementById("myInputText");
    element.classList.add("mystyle");
}

【讨论】：

如果您有 REAL jsf/bean/... 验证，PrimeFaces CSV 正是这样做的，请参阅问题评论中的链接
@Blarzek：但是您不是还需要更新字段来更改当前样式吗？我已经可以更改样式，只是在刷新发生之前它不会更新