Creating Masks for User Input (2 examples)

Cesar Banchio Updated by Cesar Banchio

In this article we are going to provide 2 examples on applying masks to user's input, when we want them formatted a certain way.

Date Format

Add a code block before the Text Block with the following snippet:

const wrapper = () => {

var input = this.window.document.querySelector(".InputText input");

input.maxLength=10;

var dateInputMask = (elm) => {

elm.addEventListener('keypress', function(e) {

if(e.keyCode < 47 || e.keyCode > 57) {

e.preventDefault();

}

var len = elm.value.length;

// If we're at a particular place, let the user type the slash

// i.e., 12/12/1212

if(len !== 1 || len !== 3) {

if(e.keyCode == 47) {

e.preventDefault();

}

}

// If they don't add the slash, do it for them...

if(len === 2) {

elm.value += '/';

}

// If they don't add the slash, do it for them...

if(len === 5) {

elm.value += '/';

}

});

};

dateInputMask(input);

}

setTimeout(wrapper, 1500)

Number Format
Add a code block before the Text Block with the following snippet:
String.prototype.reverse = function(){
return this.split('').reverse().join('');
};
const handler = function(evento) {
let num = evento.target;
var tecla = (!evento) ? window.event.keyCode : evento.which;
var valor = num.value.replace(/[^\d]+/gi,'').reverse();
var resultado = "";
var mascara = "##.###.###,#".reverse();
for (var x=0, y=0; x<mascara.length && y<valor.length;) {
if (mascara.charAt(x) != '#') {
resultado += mascara.charAt(x);
x++;
} else {
resultado += valor.charAt(y);
y++;
x++;
}
}
num.value = resultado.reverse();
}
const selection = () => {
const inp = _landbot.document.querySelector(".InputText");
inp.addEventListener("keypress", handler);
}
setTimeout(selection, 1000);

          			

          		

          
          		

          			
How did we do?

          			

          				
          				
          				
          			

          		

          
          																													

          								
          									

          										
          										
Resume flow based on external process with Landbot API (Request, Set, Go)

          									

          								
          						
          								
          									

          										
Popup on Exit Intent

          										
          									

          								
          						
          					

          				
          
            		
              
              
          	

          

          





  
  


          
        	
        

      

    


    
      
    
      

        

            
          
Contact