How to add an inputmask email mask to an input field within a table?

Asked

Viewed 2,783 times

0

How to add an email mask inputmask in a field input within a table html dynamically created? Example:

<tr role="row" data-row-index="0">
    <td class="text-center">
        <input id="chkSelecionado" type="checkbox" />
    </td>
    <td class="form-group">@Html.TextBox("Contatos[0].Nome", "", new { @class = "form-control required" })</td>
    <td class="form-group">@Html.TextBox("Contatos[0].Telefone", "", new { @class = "form-control required telefone" })</td>
    <td class="form-group">@Html.TextBox("Contatos[0].Celular1", "", new { @class = "form-control celular" })</td>
    <td class="form-group">@Html.TextBox("Contatos[0].Email", "", new { @class = "form-control required" })</td>
</tr>

$(document).ready(function(){( )};
jquery html asp.net-mvc
  • 1

    You could give a class for this email input and call a . Mask in the class after dynamic table creation.

  • 1

    Does exactly the same thing that would do off the table, like the friend said, just puts a classname to identify.

  • Okay! , so I did: <td class="form-group">@Html.Textbox("Contacts[0]. Email", "", new { @class = "form-control required email" })</td>, where I created a $(".email").inputmask({... , worked!

1 answer

0


I saw that solved, but I will give an answer in case you need to set more of a mask, without having to call the method again:

HTML example:

<input type='text' class='mask' data-mask='cpf' name='cpf'>
<input type='text' class='mask' data-mask='telefone' name='telefone'>
<input type='text' class='mask' data-mask='email' name='email'>

Shooting in focus function adding mask:

$(document).on('focusin','.mask',function(){
    var $this = $(this);
    var mask = $this.data('mask');
    makeMask(mask, $this);
});

Function that arrow the mask:

var makeMask = function (mask, $this) {
    if (mask === 'cpf') {
        $this.inputmask("999.999.999-99");
    }
    if (mask === 'telefone') {
        $this.inputmask({"mask": "+55 (99) [9] 9999-9999"});
    }
    if (mask === 'mail') {
        $this.inputmask("email");
    }
}

Advantages of this:

Whenever you need a mask anywhere, just add the classname 'Mask', and a data-attr (data-Mask) with some mask you have set in its function.

Browser other questions tagged jquery html asp.net-mvc

You are not signed in. Login or sign up in order to post.