Firefox keydown 退格问题答案

【问题标题】：Firefox keydown backspace issueFirefox keydown 退格问题
【发布时间】：2015-02-06 04:15:40
【问题描述】：

我正在构建一个终端仿真，但遇到了在 Firefox 中捕获退格键的问题。我可以在提示符下获取第一个退格并删除输入中的最后一个字符，但它不会持续存在并删除多个字符。

实际网址：http://term.qt.io/

JavaScript 代码

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);
        }
    })
})

【问题讨论】：

仅供参考，live() 自 jQuery 1.7 起已弃用。您应该使用bind() 或on()。
你的小提琴适合我。退格是否自动重复可能取决于操作系统或浏览器。我正在使用 OS X Snow Leopard 和 Chrome 24。
在 Windows 17.0.1 上使用 Firefox 切片中的一些错误。我将在“答案”中发布更多详细信息，但这似乎是某种错误
@Barmar：是的，这是 Firefox 特有的 错误。
解决方法是实现您自己的自动重复。 keydown 处理程序调用setInterval() 定期重复操作，keyup 处理程序取消它。

标签： javascript jquery events firefox keydown

【解决方案1】：

试试这个：http://jsfiddle.net/NBZG8/1/

您需要在 keydown 和 keypress 中处理退格键以支持 Chrome 和 Firefox

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
    })
})

【讨论】：

【解决方案2】：

在 Firefox Windows 17.0.1 中，任何由 $("selector").text() 返回的值都会在末尾附加一个新行字符。所以子字符串对我不起作用：

<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)
                            // next line works, you might trim the \n if it's there at the end
                            //$('body').text($('body').text().slice(0,-2));
                            // this one didn't work for me
                             $('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>

【讨论】：

【解决方案3】：

我在 Mozilla 上遇到了同样的按键问题。感谢这个主题，它解决了我的问题，所以如果有人尝试和我做同样的事情，我会发布我的代码。
在我的示例中，我尝试在用户键入两个数字时自动设置空格，但它在 Firefox 中不起作用，所以这就是我的代码：

$(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() + ' ');
            }
        }
    });

});

我注意到 Mozilla 将退格作为按键处理，而 Chrome 没有。

对不起我的英语我是法国人

【讨论】：

【解决方案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;
 }
});

【讨论】：