The problem only occurs if I use the p:inputText of Primefaces; when I use the h: inputText JSF works fine.
Below follow two examples consisting problem:
Example1:
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
<h:head>
<style type="text/css">
input:focus,select:focus,textarea:focus {
background: red;
color: white;
}
</style>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:inputText value="" />
<p:inputText value="" />
</p:panel>
<h:panelGrid columns="1">
<h:inputText value="" />
<p:inputText value="" />
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
<h:head>
<style type="text/css">
.corFoco {
background-color: red;
color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="text"]').focus(function () {
$(this).addClass("corFoco");
});
$('input[type="text"]').blur(function () {
$(this).removeClass("corFoco");
});
});
</script>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:inputText value="" />
<p:inputText value="" />
</p:panel>
<h:panelGroup>
<h:inputText value="" />
<p:inputText value="" />
</h:panelGroup>
</h:form>
</h:body>
</f:view>
</html>