Máscara no RSForm! Joomla


Para inserir máscaras em um campo de um formulário criado no RSForm! é muito fácil!
Neste exemplo estaremos utilizando a biblioteca criada por Flávio Leal presente no GitHub através do link abaixo:
https://github.com/FlavioALeal/MascaraJS

Para utilizar este plugin existem dois passos:

1 - Inclua o script no formulário

Vá até as Propriedades do formulário > CSS e Javascript e, no campo Javascript, adicione o seguinte código:

<script>
function mascara(m,t,e,c){
    var cursor = t.selectionStart;
    var texto = t.value;
    texto = texto.replace(/\D/g,'');
    var l = texto.length;
    var lm = m.length;
    if(window.event) {                 
        id = e.keyCode;
    } else if(e.which){                
        id = e.which;
    }
    cursorfixo=false;
    if(cursor < l)cursorfixo=true;
    var livre = false;
    if(id == 16 || id == 19 || (id >= 33 && id <= 40))livre = true;
    ii=0;
    mm=0;
    if(!livre){
        if(id!=8){
            t.value="";
            j=0;
            for(i=0;i<lm;i++){
                if(m.substr(i,1)=="#"){
                    t.value+=texto.substr(j,1);
                    j++;
                }else if(m.substr(i,1)!="#"){
                    t.value+=m.substr(i,1);
                }
                if(id!=8 && !cursorfixo)cursor++;
                if((j)==l+1)break;
               
            }  
        }
    }
    if(cursorfixo && !livre)cursor--;
    t.setSelectionRange(cursor, cursor);
}
</script>

2 - Adicione a máscara no campo desejado 

Agora vá até as propriedades do campo que deseja mostrar a máscara e, em atributos adicionais, adicione o seguinte código:

onkeyup="mascara('###.###.###-##',this,event,true)"

Onde ###.###.###-## representa a máscara a ser colocada. Neste exemplo estamos usando a máscara padrão do CPF.
Pronto! Agora a máscara será acionada em tempo de execução no seu formulário!


Comentários

  1. Ótimo, há tempos procurava por algo do tipo.

    Quero trazer uma sugestão: uma forma de colocar a mascara no diretório de apresentação e edição do formulário.

    Essa configuração não abrange essa situação.

    Ficaria grato, desde já agradeço...

    Mas por ora, parabéns....

    ResponderExcluir
    Respostas
    1. Olá!
      Realmente essa solução se aplica somente ao frontend.
      Para a sua sugestão seria necessário fazer alterações no código fonte do próprio RsForm, de forma a renderizar o javascript do campo "Atributos adicionais" no backend. Por ora, ele exibe somente atributos de estilização.
      Mas agradeço tua sugestão e feedback!

      Excluir
  2. Consultei o suporte, veja a resposta deles...

    Olá,

    O item de menu Diretório de submissões oferece sua própria funcionalidade, separada da sua forma real (não inclui a funcionalidade de um formulário completo).

    Embora uma área JavaScript também seja fornecida (backend> Componentes> RSForm! Pro> Gerenciar Diretórios> seu diretório de formulário> CSS e JavaScript> JavaScript), não há lugar específico para adicionar atributos em seus campos de edição.

    Você também pode ajustar o JavaScript para aplicar de forma diferente sem o uso de tais atributos.

    Alternativamente, pode incluir o acionador de atributo por meio de algumas substituições de modelo (caso seja necessário, o conhecimento de script básico será necessário).

    Substituições de modelos são explicadas aqui:

    https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

    O arquivo em questão para substituições de modelo está localizado nesse caminho:

    \ components \ com_rsform \ views \ directory \ tmpl \ edit.php

    Saudações!

    Pode me ajudar nesse sentido, como forma de um serviço, preciso muito disso.

    Desde já agradecido.

    ResponderExcluir
    Respostas
    1. Olá amigo!
      Já fiz alguns overrides em extensões do Joomla! que deram muito certo!
      Porém, nunca manipulando as models da extensão...

      Posso dar uma olhada no código do RsForms e fazer alguns testes..
      Lhe mantenho informado!

      Excluir
  3. Certo, te agradeço desde já.

    Pelo que entendi, temos dois caminhos, pela substituição ou fazendo overrides.

    Mas assim como fez acima, no gerenciado de Diretórios nos também temos a opção de utilizar um código para ser aplicado nos campos.

    É o que pude entender.

    Creio que esse caminho seja mais fácil de implantar.


    O que eu puder ajudar estou as ordens e desde já agradeço.

    Se quiser por entrar em contato para combinarmos certinho....

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Integração Joomla com Samba4 LDAP

Migração de usuários de LDAP no GLPI