Como faço para que os componentes p:InputText ao digitar algum valor fique tudo maiusculos?
conforme por exemplo o KeyTyped do Swing
Campos letras maiusculas Primefaces + JSF
F
17 Respostas
D
Crie uma função javascript no onkeyup
O
O que o colega falou realmente é uma ótima solução.
O uso de javascript é uma ótima opção.
W
//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();
}
A
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);
});
}
W
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); }); }
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.
R
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ê.
W
Então olha como estou usando a solução do Amauri.
index.xhtml<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);
});
}
<p:inputText id="tiNomePessoa"
value="#{pessoaBean.pessoa.cdstrRazaoSocial}"
required="true"
styleClass="up"
validatorMessage="Campo de preenchimento Obrigatório">
</p:inputText>
Mesmo assim não funciona!
R
Já tentou depurar? Ver o que está acontecendo?
W
Sim, e não acontece nada.
Muito estranho!
R
Sim, e não acontece nada.
Muito estranho!
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.
W
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>
A
Você esta usando qual navegador?
Para funcionar no FireFox tem que duplicar um trecho da seguinte forma:
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);
});
}
W
Você esta usando qual navegador?Para funcionar no FireFox tem que duplicar um trecho da seguinte forma:
A diferença ta no evento keyup no lugar do keypressif ( 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); }); }
Estou usando o Chrome!
A
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.
W
Deu certo, o problema estava no meu template principal.
Grato a todos pela ajuda!!
E
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
A
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?
Criado 28 de novembro de 2011
Ultima resposta 2 de dez. de 2014
Respostas 17
Participantes 7
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo JavaScript Assertivo: Testes e qualidade de codigo em... Por Gabriel Ramos — Casa do Codigo