javascript - keyup 事件重置输入字段

Question

每次我按下键盘上的一个键，它都会将 $(this).val(""); 设置为 null，并且 score 变量将为 -2 .

initialize: function() {
    var score = 0;
    var wrapper = $('<div>')
        .css({
            position:'fixed',
            top:'0',
            left:'0',
            width:'100%',
            height:'100%'
        });
    this.wrapper = wrapper;

    var self = this;
    var text_input = $('<input>')
        .addClass('form-control')
        .css({
            'border-radius':'4px',
            position:'absolute',
            bottom:'0',
            'min-width':'80%',
            width:'80%',
            'margin-bottom':'10px',
            'z-index':'1000'
        }).keyup(function() {
            var words = self.model.get('words');
            for(var i = 0;i < words.length;i++) {
                var word = words.at(i);
                var typed_string = $(this).val();
                var string = word.get('string');
                if(string.toLowerCase().indexOf(typed_string.toLowerCase()) === 0) {
                    word.set({highlight:typed_string.length});
                    if(typed_string.length === string.length) {
                        $(this).val("");
                        score+=10;
                        $("#dialog").dialog('option', 'title', 'Score : '+score);
                    }
                }
                else {
                    word.set({highlight:0});
                    $(this).val(""); // problem
                    score-=2; // problem
                    $("#dialog").dialog('option', 'title', 'Score : '+score); // problem
                }
            }
        });

    $(this.el)
        .append(wrapper
            .append($('<form>')
                .attr({
                    role:'form'
                })
                .submit(function() {
                    return false;
                })
                .append(text_input)));

    text_input.css({left:((wrapper.width() - text_input.width()) / 2) + 'px'});
    text_input.focus();

    this.listenTo(this.model, 'change', this.render);
},

当我删除导致问题的代码时，它每次都完美运行。输入正确的单词并给出 var Score 分数 +10。

Answer 1

keyup 事件如何工作？

每次释放按键时都会触发 keyup 事件。

这意味着如果目标单词是 haromy，当输入 h 时，会触发事件并运行回调中的代码。

这意味着如果第一个字母输入错误，则以下内容将始终为假。

"haromy".toLowerCase().indexOf("f".toLowerCase()) === 0

因此用户输入一个字母，它的第一个字母不同，因此该字段会立即被 $(this).val("") 清空。

也许使用另一个事件？

如果您想在用户取消输入焦点后进行检查，则可以使用 blur 事件。

如果您想在用户单击按钮时进行检查，请在新按钮上使用单击事件。

如何设计 JavaScript 应用程序的风格？

不要使用 jQuery 的 css 函数设置初始 CSS。将样式保留在 HTML 中链接的 CSS 文件中。

使用 css 函数只会扰乱您的应用程序逻辑，使维护变得困难，并将样式的应用延迟到 JavaScript 执行之后。

如何将 jQuery 事件与 Backbone 绑定(bind)？

我删除了 backbone.js从问题中删除标签，因为它无关紧要，但看到您正在使用它并且它可以改进很多，我将在此处提供更多信息。

使用 Backbone 时，不要直接使用 jQuery 绑定(bind)事件。使用 Backbone View 的 events 哈希。

您的 View 可能如下所示:

var View = Backbone.View.extend({
    template: '<div class="wrapper"><input class="form-control" /></div>'
    events: {
        "blur input": "onInputBlur"
    },
    onInputBlur: function() {
        var words = this.model.get('words').each(function(word) {
            var typed_string = this.$input.val(),
                string = word.get('string');
            // Check each word and score here
        }, this);
    },


    initialize: function() {
        this.score = 0;
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.html(this.template);
        this.$wrapper = this.$('.wrapper');
        this.$input = this.$('input').focus();
        return this;
    },
});

去掉样式后，CSS 文件将是:

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.input {
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    min-width: 80%;
    width: 80%;
    margin-bottom: 10px;
    z-index: 1000;
}