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?

How to set up questions with a countdown

Set a timer to get the time spent during the flow

Contact