Geek Answers Handbook

Masked input inside text box with xeditable doesn't work

I have x-editable input for my boot application, which I use to edit usernames. now I need to use jquery.maskedinput.min.js to get the masked format, while iam enters the text box, which is appering when I click on span, as in x-editable. This is my html code example.

<div id="sZip" class="profile-info-value ">
<span class="editable" id="Dob">dob</span>
</div>

and I got x editable by applying a j query like this

  $('#zip').editable({
                    type: 'text',
                    name: 'zip',
                    tpl:'   <input type="text" id ="zipiddemo" class="form-control    input-sm dd" style="padding-right: 24px;">'

                });

and it works fine, now I need to make this text box oily, but when I call a masked input function like this

$(".dd").mask("99999-?9999");

it does not work, I do not know the exact reason. Any help would be appreciated

+4
4

, x .

, .

$('#users a').editable({
    type: 'text',
    name: 'username',
    tpl: '<input type="text" id ="zipiddemo" class="mask form-control    input-sm dd" style="padding-right: 24px;">'
});

$(document).on("focus", ".mask", function () {
    $(this).mask("(999) 999-9999? x99999");
});

DEMO

+10

:

  $('#zip .editable').editable({
                type: 'text',
                name: 'zip',
                tpl:'   <input type="text" id ="zipiddemo" class="form-control    input-sm dd" style="padding-right: 24px;">'

            }).on('shown',function(){
$("input#zipiddemo").mask("99-999");
  });

DEMO

+2

You add dynamic input .ddso below will not work

$(".dd").mask("99999-?9999");

Use documentto find an element and then disguise it.

   $(document).find(".dd").mask("99999-?9999");
0
source

Improving Dhiraj's answer, a more elegant way to do such a thing would be to use the attribute inputclassspecified by the Bootstrap X-editable API.

<a data-inputclass="mask"></a> <!-- input -->

$(document).on("focus", ".mask", function () {
    $(this).mask("(999) 999-9999? x99999");
});
0
source

More articles:


All Articles