CODEWITHSUNDEEP
javascriptjqueryhtml
Christopher
Christopher

Reputation: 23

Backspace (deleting characters) not working properly in Firefox due to Javascript

I am writing some Javascript/Jquery for a co-worker that is supposed to edit text in a textfield as the user is typing. The purpose of the code is to add formatting to a string of characters (in particular, formatting strings of twelve characters into a valid formatted mac address), however on Firefox I am unable to use the backspace to delete characters once they have been entered into the textfield.

Here is the code that does the formatting:

$(document).ready(function () {
    var length = 0;
    $("#mac_input").focusin(function (evt) {

        $(this).keypress(function () {
            content = $(this).val();
            content_pre_format = content.replace(/\:/g, '');
            content_formatted = content_pre_format.replace(/\n/g, '');

            var text_input = $('#mac_input');

            if (content_formatted.length % 12 == 0 && length != 0) {
                text_input.val(text_input.val() + "\n");
            }

            length = content_formatted.length % 12;

            if (length % 2 == 0 && length != 0) {
                if (text_input.val().charAt(text_input.val().length - 1) == ':') {

                } else {
                    text_input.val(text_input.val() + ':');
                }
            }

        });
    });
});

Edit: I figured out more about the bug. When I start typing, lets say "abc", right when I type the "c" the script edits the field to show "ab:c". I can backspace the "c" and the ":" but no more. At this point the text field shows "ab", however if I use ctrl-a to select all, the text field changes to "ab:"

Upvotes: 1

Views: 1531

Answers (2)

Nicolas Straub
Nicolas Straub

Reputation: 3411

here's a more robust solution (current solution will break if a user starts deleting anywhere except the end of the stirng):

$(document).ready(function() {
$("#mac_input").keydown(function (event) {
    if (!((event.which > 47 && event.which < 71) || (event.which > 95 && event.which < 106))) {
        event.preventDefault();
    }
});

$("#mac_input").keyup(function () {
    var content=$(this).val();
    content = content.replace(/\:/g, '');
    content = content.replace(/\n/g, '');
    content = content.replace(/(\w{12}(?!$))/g, '$1\n').replace(/(\w{2}(?!\n)(?!$))/g, '$1:')
    $(this).val(content);
});

});

it ensures the string is always parsed as a collection of MAC addresses

to explain, it uses to regular expressions, ([abcdef0123456789]{12}(?!$)) matches any sequence of twelve characters that can conform a MAC address and aren't at the end of the string (that's what the (?!$)) lookahead does), and replaces it with the matched string and an appended newline, then it matches any sequence of 2 MAC address characters (([abcdef0123456789]{2}) that aren't immediately followed by a new line or the end of the string ((?!\n)(?!$)).

Upvotes: 2

Antoine Combes
Antoine Combes

Reputation: 1454

Just check this: if(event.key == "Backspace") {return;} at the beginning of your keypress handler, and you should be fine.

NB: You have to add the event argument to your keypress handler function.

Upvotes: 2

Related Questions