masked input inside xeditable text box not working

Question

I have an x-editable input for my bootstrap application , which I'm using to edit usernames. now i need to use the jquery.maskedinput.min.js to get the masked format while iam entering in text box which is appering when i click on the span as in the x-editable .this is my sample html code

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

and i achived the x editable by applying the 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 is working fine now i need to make that text box maskable ,but when i am calling the masked input function like this

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

it is not working ,i dont know the exact reason.any help will be appreciated

please add a demo on jsfiddle.net and post the link here – Dhiraj Jul 19 '14 at 05:10 — Dhiraj, Jul 19 '14 at 05:10

score 10 · Accepted Answer · answered Jul 19 '14 at 05:29

10

It's not working because the x editable elements are added dynamically.

I hope this works.

$('#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

answered Jul 19 '14 at 05:29

Dhiraj

33,140
10
61
78

2

hai Dhiraj Bodicherla i have one more doubt,how to show the password field in x-editable .if i have the password field from data base and i put the type: 'password', in editable function,when i click on the span then it will be shown as password and after i click on submit button it is shown as '[hidden]'.my question is for first time when data coming from database ,when i put the value in span ,it just shown the actual value,how can i make that look like '[hidden]' – abhi Jul 28 '14 at 07:16
This worked for me. My only concern: how do we ensure that the data is populated in the template view? I made this change in two places. One prepopulates the form, the other doesn't. – Talador12 Jan 10 '17 at 22:02

score 2 · Answer 2 · answered Jul 27 '15 at 13:20

Or just do:

  $('#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

score 1 · Answer 3 · answered Jun 19 '17 at 14:24

Improving Dhiraj's answer, a more elegant way of doing such a thing would be using the inputclass attribute given by the Bootstrap X-editable API.

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

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

score 0 · Answer 4 · answered Jul 19 '14 at 05:30

0

You are adding .dd input dynamically so below will not work

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

Use document to find element and then mask it

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

answered Jul 19 '14 at 05:30

Bhushan Kawadkar

28,279
5
35
57

masked input inside xeditable text box not working

4 Answers4