Can't get mask to work with Save/Edit on input

Question

I can't figure out how to get this phone number input mask and Save/Edit input feature to play nice together.

Basically I need the input field to be disabled unless Edit is selected, then it becomes enabled, then disabled again when Save is selected.

var phoneInputEdit = document.getElementById('phone-input-edit');
  if (phoneInputEdit) {
new Formatter(phoneInputEdit, {
    'pattern': '({{999}}) {{999}}-{{9999}}',
    'persistent': true
});

And

$(document).ready(function() {
$('.has-feedback input[name="Edit"]').click(function() {
    $(this).val(function(i,v) {
        return v === 'Edit' ? 'Save' : 'Edit';
    });
    //$(this).parent().prev().prev().next('img').toggle();
    $(this).parent().prev().prev().next('img').toggleClass('icon-inactive');
    $(this).parent().prev().prev('input[required]').prop('readonly',function(i,r) {
        return !r;
    });
  });
});

I tried wrapping the input mask in noConflict() but that didn't seem to work. If I get rid of all of the input mask code then of course the Save/Edit works which made me think it must be a library conflict. Maybe I did it wrong.

@IlGala Not true. The input is always active if you try to type in the input — Adjit, Nov 09 '15 at 17:33
See [this](https://jsfiddle.net/DTcHh/14120/), set property `disabled` too will work. — fuyushimoya, Nov 09 '15 at 17:36
What browser are you using? Admittedly I've only tried on android chrome but it works on that; input is not editable until you click CTA. As fuyushimoya states, you could use disabled. — Chris Rogers, Nov 09 '15 at 17:41

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

You're missing the disabled property. By adding/removing this property when you click the save/edit button it will work

edited May 23 '17 at 12:23

Community

1
1

answered Nov 09 '15 at 17:38

IlGala

3,043
3
31
46

1

Hi, thanks for responding. I added the disabled property, but clicking Edit/Save doesn't enable/disable it. Edit: Nevermind, I had added this to the html and not prop. This fixed it. Thanks! – bunnycode Nov 09 '15 at 19:13

Can't get mask to work with Save/Edit on input

1 Answers1