当 outputLabel 获得焦点时，panelGrid 中的样式输入组件

Question

我正在使用 JSF 和 Primefaces .. 当我关注外标签时，我需要输入文本获得背景颜色 这是我的代码：

---

<p:panelGrid columns="2" layout="grid" style="border:0px none;background:none" styleClass="ui-panelgrid-blank ">
   <p:outputLabel value="#{msg.PurchaseReturns_Txt_Document_NO}"   />
   <p:inputText readonly="true" value="#{quotationMB.instance.object.quotationid}"/>
</p:panelGrid>

<p:panelGrid styleClass="datePick ui-panelgrid-blank " columns="2" layout="grid"  style="border:0px none;background:none">
   <p:outputLabel value="#{msg.RequestForQuotation_Txt_Date}" />
   <p:calendar  value="#{quotationMB.instance.object.validto}" locale="de" navigator="true" pattern="yyyy-MMM-dd" showOn="button" />
</p:panelGrid>

---

******************************JAVA脚本******************** ***********

我已经尝试过这段代码 .. 它有效，但在我页面中的整个输入文本上：

---

 $('.ui-outputlabel').click(function() {
    $(this).find('.ui-inputtext').css('background-color', 'red');
});

---

Answer 1

您的问题有一些问题。

首先，您不能聚焦p:outputLabel（呈现为HTML label）。单击标签将聚焦链接的字段。这就引出了第二个问题。

为了使p:outputLabel 能够按照showcase 中指定的方式工作（验证错误、错误样式、所需指示符等），您需要使用for 属性将其链接到输入组件（和普通 HTML 一样）。

因此，如果您将for 添加到标签中，您可以使用:focus CSS 选择器简单地设置输入字段的样式。

从技术上讲，您可以让您的点击监听器像这样工作（但这没有意义）：

$("label").click(function(){
    document.getElementById(this.htmlFor).style.backgroundColor = "red";
});

将focus 和blur 侦听器添加到输入字段并使用侦听器在相应标签上切换CSS 类会更有意义。例如：

$("input").focus(function(){
    $("label[for=\""+ this.id +"\"]").addClass("focus");
});
$("input").blur(function(){
    $("label[for=\""+ this.id +"\"]").removeClass("focus");
});

另见：

• Anyway to have a label respond to :focus CSS