Issue with Firefox not recognizing keydown events for the backspace key

Question

Issue with Firefox not recognizing keydown events for the backspace key

I am currently developing a terminal emulator and have encountered an issue with capturing the backspace key in Firefox. While I am able to capture the first backspace press and delete the last character in the input prompt, the problem arises when trying to remove multiple characters.

For more information, please visit the official website:

To see the replication of the issue, you can view it here: http://jsfiddle.net/BgtsE/1/

Below is the JavaScript code snippet:

function handleKeys(e){
    var evt = e || window.event;
    var key = evt.charCode || evt.keyCode;
    if(evt.type == "keydown")
    {
        curr_key = key;
        if(key == 8)
        {
            evt.preventDefault();
            if(0 < $('body').text().length)
                $('body').text($('body').text().slice(0,-1));
        }
    }
    else if(evt.type == "keypress")
    {
        if(97 <= key && key <= 122)
        {
            if(curr_key != key)
                $('body').append(String.fromCharCode(key));
        }
        else
            $('body').append(String.fromCharCode(key));
    }
}
$(function(){
    $('html').live({
        keydown:function(e){
            handleKeys(e);
        },
        keypress:function(e){
            handleKeys(e);
        }
    })
})

javascript jquery events firefox keydown

Answer 1

Answer №1

Check out this solution here: http://jsfiddle.net/NBZG8/1/

To ensure compatibility with both Chrome and Firefox, make sure to handle the backspace key in both keydown and keypress events.

function handleKeys(e){
    var evt = e || window.event;
    var key = evt.charCode || evt.keyCode;

    if (evt.type == "keydown") {
        curr_key = key;
        if(key == 8 && !$.browser.mozilla) {
            backspaceHandler(evt);
        }
    } else if (evt.type == "keypress") {
        if (key == 8) {
            backspaceHandler(evt);
        } else if (97 <= key && key <= 122) {
            if(curr_key != key) {
                $('body').append(String.fromCharCode(key));
            }
        } else {
            $('body').append(String.fromCharCode(key));
        }
    }
}

function backspaceHandler(evt) {
    evt.preventDefault();
    if(0 < $('body').text().length) {
        $('body').text($('body').text().slice(0,-1));
    }  
};

$(function(){
    $('html').live({
        keydown : handleKeys,
        keypress : handleKeys
    })
})

Answer 2

Check out this solution here: http://jsfiddle.net/NBZG8/1/

To ensure compatibility with both Chrome and Firefox, make sure to handle the backspace key in both keydown and keypress events.

function handleKeys(e){
    var evt = e || window.event;
    var key = evt.charCode || evt.keyCode;

    if (evt.type == "keydown") {
        curr_key = key;
        if(key == 8 && !$.browser.mozilla) {
            backspaceHandler(evt);
        }
    } else if (evt.type == "keypress") {
        if (key == 8) {
            backspaceHandler(evt);
        } else if (97 <= key && key <= 122) {
            if(curr_key != key) {
                $('body').append(String.fromCharCode(key));
            }
        } else {
            $('body').append(String.fromCharCode(key));
        }
    }
}

function backspaceHandler(evt) {
    evt.preventDefault();
    if(0 < $('body').text().length) {
        $('body').text($('body').text().slice(0,-1));
    }  
};

$(function(){
    $('html').live({
        keydown : handleKeys,
        keypress : handleKeys
    })
})

Answer 3

Answer №2

When using Firefox Windows 17.0.1, I encountered an issue where any value returned by $("selector").text() had an additional newline character at the end. This caused problems when trying to use substring in my code:

<html>
    <head>
        <title>test</title>
        <script src="jquery.js"></script>
        <script>
            $("document").ready(function(){
                console.log("body text seems to have a new line character");
                console.log(($('body').text()[5]=="\n"));
            });

            function handleKeys(e){
                var evt = e || window.event;
                var key = evt.charCode || evt.keyCode;
                if(evt.type == "keydown")
                {
                    curr_key = key;
                    if(key == 8)
                    {
                        evt.preventDefault();
                        if(0 < $('body').text().length)
                            //$('body').text($('body').text().slice(0,-2));
                             $('body').text($('body').text().substring(0,$('body').text().length-1)); 
                    }
                }
                else if(evt.type == "keypress")
                {
                    if(97 <= key && key <= 122)
                    {
                        if(curr_key != key)
                            $('body').append(String.fromCharCode(key));
                    }
                    else
                        $('body').append(String.fromCharCode(key));
                }
            }
            $(function(){
                $('html').live({
                    keydown:function(e){
                        handleKeys(e);
                    },
                    keypress:function(e){
                        handleKeys(e);
                    }
                })
            })
        </script>
    </head>
    <body>12345</body>
</html>

Answer 4

When using Firefox Windows 17.0.1, I encountered an issue where any value returned by $("selector").text() had an additional newline character at the end. This caused problems when trying to use substring in my code:

<html>
    <head>
        <title>test</title>
        <script src="jquery.js"></script>
        <script>
            $("document").ready(function(){
                console.log("body text seems to have a new line character");
                console.log(($('body').text()[5]=="\n"));
            });

            function handleKeys(e){
                var evt = e || window.event;
                var key = evt.charCode || evt.keyCode;
                if(evt.type == "keydown")
                {
                    curr_key = key;
                    if(key == 8)
                    {
                        evt.preventDefault();
                        if(0 < $('body').text().length)
                            //$('body').text($('body').text().slice(0,-2));
                             $('body').text($('body').text().substring(0,$('body').text().length-1)); 
                    }
                }
                else if(evt.type == "keypress")
                {
                    if(97 <= key && key <= 122)
                    {
                        if(curr_key != key)
                            $('body').append(String.fromCharCode(key));
                    }
                    else
                        $('body').append(String.fromCharCode(key));
                }
            }
            $(function(){
                $('html').live({
                    keydown:function(e){
                        handleKeys(e);
                    },
                    keypress:function(e){
                        handleKeys(e);
                    }
                })
            })
        </script>
    </head>
    <body>12345</body>
</html>

Answer 5

Answer №3

Encountering a similar issue with keypress in Mozilla prompted me to seek solutions. I'm grateful for this discussion as it helped resolve my problem, and now I intend to share my code in case others face a similar challenge.
In my scenario, I attempted to automatically add spaces when the user inputs two numbers. Unfortunately, this functionality did not work in Firefox, leading me to tweak my code accordingly:

$(function() {

    $('#field1, #field2').on('keypress',function(event) {
        event = event || window.event;
        var charCode = event.keyCode || event.which,
            lgstring = $(this).val().length,
            trimstring;
        if(charCode === 8) {
            event.returnValue = false;
            if(event.preventDefault)
                event.preventDefault();
            if(0 < $(this).val().length) {
                $(this).val($(this).val().slice(0,-1));
            }  
        }
        else if(((charCode > 31) && (charCode < 48 || charCode > 57)) || lgstring >= 14) {
            event.returnValue = false;
            if(event.preventDefault)
                event.preventDefault();
        }
        else {
            trimstring = $(this).val().replace(/ /g,"");
            if((lgstring !== 0) && (trimstring.length % 2) === 0 ) {
                $(this).val($(this).val() + ' ');
            }
        }
    });

});

It's worth noting that while Mozilla treats backspace as a keypress, Chrome does not exhibit the same behavior.

Pardon any language issues, as English is not my first language.

Answer 6

Encountering a similar issue with keypress in Mozilla prompted me to seek solutions. I'm grateful for this discussion as it helped resolve my problem, and now I intend to share my code in case others face a similar challenge.
In my scenario, I attempted to automatically add spaces when the user inputs two numbers. Unfortunately, this functionality did not work in Firefox, leading me to tweak my code accordingly:

$(function() {

    $('#field1, #field2').on('keypress',function(event) {
        event = event || window.event;
        var charCode = event.keyCode || event.which,
            lgstring = $(this).val().length,
            trimstring;
        if(charCode === 8) {
            event.returnValue = false;
            if(event.preventDefault)
                event.preventDefault();
            if(0 < $(this).val().length) {
                $(this).val($(this).val().slice(0,-1));
            }  
        }
        else if(((charCode > 31) && (charCode < 48 || charCode > 57)) || lgstring >= 14) {
            event.returnValue = false;
            if(event.preventDefault)
                event.preventDefault();
        }
        else {
            trimstring = $(this).val().replace(/ /g,"");
            if((lgstring !== 0) && (trimstring.length % 2) === 0 ) {
                $(this).val($(this).val() + ' ');
            }
        }
    });

});

It's worth noting that while Mozilla treats backspace as a keypress, Chrome does not exhibit the same behavior.

Pardon any language issues, as English is not my first language.

Answer 7

Answer №4

$('#id').keypress(function(e) {

if(e.charCode > 0 || e.keyCode === 8){
 if(e.keyCode === 8){
   return true;
 }else if((e.charCode !== 0) && ((e.charCode  > 57 && e.charCode  < 65)){
   return false;
   }
 }else if((e.keyCode !== 0) && ((e.keyCode  > 57 && e.keyCode  < 65)){
  return false;
 }
});

Answer 8

$('#id').keypress(function(e) {

if(e.charCode > 0 || e.keyCode === 8){
 if(e.keyCode === 8){
   return true;
 }else if((e.charCode !== 0) && ((e.charCode  > 57 && e.charCode  < 65)){
   return false;
   }
 }else if((e.keyCode !== 0) && ((e.keyCode  > 57 && e.keyCode  < 65)){
  return false;
 }
});

Issue with Firefox not recognizing keydown events for the backspace key

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Apollo Client mutation input type is missing data

Generating a sequential array of dates and times in Angular

Is there a way to compare two regex values using vuelidate?

What is the best way to determine if an AJAX response is of the JavaScript content type?

Preventing selection of past dates with Material UI in ReactJS

Something is wrong with the OMDb API search using JQuery and JSON

Configuration of an MVC-based web application

ElementUI Cascader not rendering properly

Encountering an "Aborted Session" error when clicking the first submit button in ASP.NET Core MVC

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

Using Special Characters in React JS Applications

Unable to modify the active property of the specified object as it is read-only

Error in Prisma: Unable to retrieve data due to undefined properties (attempting to access 'findMany')

"Exploring the world of Typescript's return statements and the

Error encountered when using the $.post function

Preserve the existing value and then check it against the updated value of a variable within JavaScript

Retrieving a specific time using a JavaScript interface

What is the best way to allow someone to chain callback methods on my custom jQuery plugin?

What is the reason behind this being deemed as true?

Automatically calculate the multiplication of a number by 10 in React JS within the State