Dialog closes on backspace

Question

Does anyone know why the jQuery dialog closes when backspace on a readonly input box is pressed?

There are other issues as well when other keys are pressed on readonly textbox say space key. Thus, my assumption is that it has something to do with readonly input box.

I need to make this input readonly so user should not be able to change the value. I cannot make it disabled because then my controller cannot receive the values of disabled controls.

I am working in ASP.NET MVC3.

Please help. Thanks

UPDATE

I press backspace when dialog is open, it closes the dialog. Difference is on Add dialog I have to press backspace twice. For Edit it closes on one backspace key press.

This is how I am opening the dialog on two links - Add and Edit

$('#add').click(function () {
            $('#popup-form-dialog').load('@Url.Action("Add", "Home")', function (html)
                    { $('#dialog').html(html); });
            $('#dialog').dialog('option', 'title', 'Add');
            $('#dialog').parent().css({ position: "fixed" }).end().dialog('open');
        });

        $('#edit a').live('click', function () {
            var id = $(this).attr('id');
            $('#dialog').load('@Url.Action("Edit","Home")/' + id, function (html)
                    { $('#dialog').html(html); });
            $('#dialog').dialog('option', 'title', 'Edit');
            $('#dialog').parent().css({position:"fixed"}).end().dialog('open');
            return false;
        });

$('#dialog').dialog({
            bgiframe: true,
            autoOpen: false,
            resizable: false,
            width: 500,
            modal: true,
            close: function () {
               //make changes to the parent page
            }

    });

UPDATE

Noticed - backspace on dialog is actually doing backspace of browser. I wonder why it is happening when I have the modal dialog? And how to stop this? Any thoughts?

What happens when the dialog is open and you click the browsers back button? Also, could you share any relevant code so we can get a better look at what's going on? — Chase, Oct 12 '12 at 14:14
@Chase - I have updated my question to show what is going on. — peacefulmember, Oct 12 '12 at 15:08

Kapil Khandelwal · Answer 1 · 2012-10-12T14:22:24.247

0

You can try following options:

1.) Disable the input textbox by adding disabled="true"

2.) Move cursor out when it somebody tries to move it inside readonly text box.

onfocus = "this.blur()"

3.) Use label instead of readonly textbox.

edited Oct 12 '12 at 14:22

answered Oct 12 '12 at 14:16

Kapil Khandelwal

15,958
2
45
52

Dialog closes on backspace

1 Answers1