logo标签列表

火狐浏览器按下退格键的问题

javascriptjqueryeventsfirefoxkeydown
3
我正在构建一个终端仿真器，在 Firefox 中捕获退格键时遇到了问题。我能够获取第一个退格键并删除提示符后输入的最后一个字符，但它不会持续删除多个字符。
实际网站: http://term.qt.io/ 在这里复制: http://jsfiddle.net/BgtsE/1/ 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);
        }
    })
})​
FYI，live()在jQuery 1.7版本之后已被弃用。你应该使用bind()或者on()。 - Barmar
1
在 Windows 17.0.1 上使用 Firefox，slice 函数存在一些 bug。我将在“答案”中发布更多细节，但似乎是某种类型的错误。 - HMR
@Barmar：是的，这是一个仅限于Firefox的bug。 - Zack Zatkin-Gold
解决方法是实现自己的自动重复。keydown处理程序调用setInterval()定期重复操作，keyup处理程序取消它。 - Barmar
修复方法是：$('body').text($('body').text().substring(0,$('body').text().length-1)); - Zack Zatkin-Gold
显示剩余2条评论
4个回答
5
尝试这个：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
    })
})​
0
$('#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;
 }
});
0
在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>
0

我在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 则不是。

抱歉我的英语不好，我是法国人。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接