keyup事件重置输入字段

Question

每当我按下键盘上的某个键时，它会将$(this).val("");设置为空，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时，会触发事件并运行回调中的代码。

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

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

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

也许使用其他活动？

如果您想在用户取消聚焦输入后进行检查，blur事件将起作用。

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

如何设计JavaScript应用程序样式？

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

使用css函数只会使应用程序逻辑变得混乱，因此在执行JavaScript之后很难维护和延迟样式的应用。

如何使用Backbone绑定jQuery事件？

我从问题中删除了backbone.js标记，因为它无关紧要，但是看到你正在使用它并且它可以得到很多改进，我会在这里提供更多信息。

使用Backbone时，不要直接使用jQuery绑定事件。使用Backbone视图的events哈希。

您的观点可能如下所示：

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