Como faço para que os componentes p:InputText ao digitar algum valor fique tudo maiusculos?
conforme por exemplo o KeyTyped do Swing
Crie uma função javascript no onkeyup
O que o colega falou realmente é uma ótima solução.
O uso de javascript é uma ótima opção.
//Maiúsculo
function strToUpper(texto){
//para usar onkeyup="strToUpper(this)"
texto.value = texto.value.toUpperCase();
}
//minúsculo
function strToLower(texto){
//para usar onkeyup="strToLowerCase(this)"
texto.value = texto.value.toLowerCase();
}Você pode usar o código abaixo e colocar o styleClass=“up”
jQuery(document).ready(function(jQuery) {
// Chamada da funcao upperText(); ao carregar a pagina
upperText();
});
// Funcao que faz o texto ficar em uppercase
function upperText() {
// Para tratar o colar
jQuery(".up").bind('paste', function(e) {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
// Para tratar quando é digitado
jQuery(".up").keypress(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}[quote=AmauriSpPoa]Você pode usar o código abaixo e colocar o styleClass=“up”
[code]
jQuery(document).ready(function(jQuery) {
// Chamada da funcao upperText(); ao carregar a pagina
upperText();
});
// Funcao que faz o texto ficar em uppercase
function upperText() {
// Para tratar o colar
jQuery(".up").bind(‘paste’, function(e) {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
// Para tratar quando é digitado
jQuery(".up").keypress(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}
[/code][/quote]
Bom dia AmauriSpPoa tem como você posta um exemplo mais detalhado desse código?
pois não conseguir implementar do jeito que você citou.
Grato,
Warquia P.
no exemplo dele os seus componentes tem que ter a classe up neles.
Existem vários fatores a serem avaliados nesse caso. Você quer que tudo apareça maiúsculo, então cria um CSS com issoinput {
text-transform: uppercase;
} Aí pensa que tudo está a mil maravilhas, só que quando vai ver, essa mudança é simplesmente estética, o valor enviado no request ainda está em minúsculo (ou seja lá como o usuário digitou), e então implementa uma solução parecida com a do Amauri, e teoricamente tudo funciona.
Eu já tive casos onde isso aí não funcionava muito bem no Firefox, o campo não se movia de acordo com o ponteiro, mas pode ser que isso não aconteça com você.
Então olha como estou usando a solução do Amauri.
index.xhtml
[code]
jQuery(document).ready(function(jQuery) {
// Chamada da funcao upperText(); ao carregar a pagina
upperText();
});
// Funcao que faz o texto ficar em uppercase
function upperText() {
// Para tratar o colar
jQuery(".up").bind(‘paste’, function(e) {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
// Para tratar quando é digitado
jQuery(".up").keypress(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}
<p:inputText id="tiNomePessoa"
value="#{pessoaBean.pessoa.cdstrRazaoSocial}"
required="true"
styleClass="up"
validatorMessage="Campo de preenchimento Obrigatório">
</p:inputText>[/code]
Mesmo assim não funciona!
Já tentou depurar? Ver o que está acontecendo?
Sim, e não acontece nada.
Muito estranho!
[quote=warquia]Sim, e não acontece nada.
Muito estranho![/quote]
Como assim não acontece nada?
O método não é invocado? Ele é invocado, executado normalmente e não produz o resultado esperado.
As vezes tem algum erro aí, que você pode ver no console que os browsers mais modernos tem.
Olha como ta meu código.
<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<script>
jQuery(document).ready(function(jQuery) {
// Chamada da funcao upperText(); ao carregar a pagina
upperText();
});
// Funcao que faz o texto ficar em uppercase
function upperText() {
// Para tratar o colar
jQuery(".up").bind('paste', function(e) {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
// Para tratar quando é digitado
jQuery(".up").keypress(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}
</script>
<ui:fragment>
<ui:composition template="template.xhtml">
<ui:define name="conteudo">
<p:panel style="alignment-baseline: central" id="panelCadastroPessoa">
<p:focus context="panelCadastroPessoa"/>
<h:form id="formDialogPessoa">
<p:panelGrid id="display">
<p:row>
<h:outputText value="Nome" style="float: right;" />
<p:inputText id="tiNomePessoa"
value="#{pessoaBean.pessoa.cdstrRazaoSocial}"
size=""
required="true"
styleClass="up"
validatorMessage="Campo de preenchimento Obrigatório">
</p:inputText>
<p:message for="tiNomePessoa" display="icon"/>
</p:row>
</p:panelGrid>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
</ui:fragment>
</html> Você esta usando qual navegador?
Para funcionar no FireFox tem que duplicar um trecho da seguinte forma:
[code]if ( jQuery.browser.mozilla) {
// Para tratar quando é digitado
jQuery(".up").keyup(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}
if ( jQuery.browser.msie || jQuery.browser.safari||jQuery.browser.chrome) {
// Para tratar quando é digitado
jQuery(".up").keypress(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}[/code]
A diferença ta no evento keyup no lugar do keypress
[quote=AmauriSpPoa]Você esta usando qual navegador?
Para funcionar no FireFox tem que duplicar um trecho da seguinte forma:
[code]if ( jQuery.browser.mozilla) {
// Para tratar quando é digitado
jQuery(".up").keyup(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}
if ( jQuery.browser.msie || jQuery.browser.safari||jQuery.browser.chrome) {
// Para tratar quando é digitado
jQuery(".up").keypress(function() {
var el = jQuery(this);
setTimeout(function() {
var text = jQuery(el).val();
el.val(text.toUpperCase());
}, 100);
});
}[/code]
A diferença ta no evento keyup no lugar do keypress[/quote]
Estou usando o Chrome!
Fiz um teste aqui com o seu código, no <p:panelGrid id="display"> ta faltando o atributo columns="" eu coloquei columns="2" e funcionou.
Deu certo, o problema estava no meu template principal.
Grato a todos pela ajuda!!
E ai pessoal!!
Sei q o tópico é velho mas estou com um problema.
Usando conforme o exemplo, está funcionando…
Só não consigo fazer funcionar em componentes p:dialog do primefaces…
No meu caso usando uma tela padrão com facelets e nesta tela pus o script.
Meus dialog estão fora do ui:decorate
Será q é por isso q não funciona?
Abraços
Boa noite, o que pode estar acontecendo é que algum erro na hora de montar a pagina está impedindo a execução do trecho de javaScript, já tentou utilizar o firebug para ver se tem algum erro?