Question

使用JSF和Primefaces ..当我专注于outlabel时，我需要输入文本获得背景颜色这是我的代码：

<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

当outputLabel被聚焦时，panelGrid中的样式输入组件

1 个答案: