Phone input

[jerrac]

Any chance of getting a telephone input type? Not the html5 kind, but something that only lets a phone number be entered?

I was looking at https://github.com/digitalBush/jquery.maskedinput but I don't see an easy way to integrate it with x-editable. Unless there's an x-editable option that would let me run $(select the input).mask("(999) 999-9999") that I don't see/understand...

[vitalets]

hi, you can set mask in shown event:

    $('#username').on('shown', function() {
        $(this).data('editable').input.$input.mask('...');
    });

[jerrac]

Awesome! Worked like a charm. Thanks!

[wartur]

Hello.Those who have problems with this instruction cite another option for version 1.4.5

$('.jsPhoneMask').on('shown', function(e, editable) { if(editable == null) // if you have bootstrap see this: http://vitalets.github.io/x-editable/docs.html (goto events) return true;

// editable.input.$input.mask('+7(999)999-9999');           // this not work
editable.formOptions.input.$input.mask('+7(999)999-9999');  // this work!!!

});

[vitalets]

hi @wartur, thanks for remark. I've fixed in dev branch so original instruction is correct. Also you can use

var editable = $(this).data('editable');
editable.input.$input.mask('+7(999)999-9999');         

to get editable from element itself.

[wartur]

thanks too!

[allaghi]

Hi can I get example how to use it, I tried to use this code but it didn't work? Did I miss something?

$('#phone').on('shown', function() { $(this).data('editable').input.$input.mask('...'); });

[chall8908]

You need a separate library to do input masking. I use jquery.inputmask myself.

[carlosrevendamais]

I tried using the jquery.inputmask unsuccessfully got the error: "Uncaught TypeError: Cannot call method 'inputmask' of undefined";

Here my code:

            $(this).on('shown', function(e, editable) {
                    $(this).data('editable').input.$input.inputmask('decimal', { rightAlignNumerics: true, radixPoint: ",", digits: 2 });
            });

[vitalets]

@carlosrevendamais it is because shown event exists in both popover and x-editable. check it

$(this).on('shown', function(e, editable) {
if (editable) {
   $(this).data('editable').input.$input.inputmask('decimal', { rightAlignNumerics: true, radixPoint: ",", digits: 2 });
}
});

[carlosrevendamais]

thanks, it works!

Carlos Santos

2013/10/31 Vitaliy Potapov notifications@github.com

@carlosrevendamais https://github.com/carlosrevendamais it is because shown event exists in both popover and x-editable. check it

$(this).on('shown', function(e, editable) {if (editable) { $(this).data('editable').input.$input.inputmask('decimal', { rightAlignNumerics: true, radixPoint: ",", digits: 2 });}});

— Reply to this email directly or view it on GitHubhttps://github.com/vitalets/x-editable/issues/93#issuecomment-27539458 .

[mcianc]

This method seem work only when element is available before initilization. How workaround if element are added dinamically?

I need to know how add event handler before element is added.

[chall8908]

@mcianc you can do that by assigning the handler to an element higher up in the DOM. Like so:

$('body').on('shown', '.editable', function(e, editable) {
  // do work on the editable here
});