[英]keyup event resets input field
Every time I press a key on my keyboard, it sets $(this).val("");
每当我按下键盘上的一个键时,它都会设置
$(this).val("");
to null and the score
variable will be -2. 为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);
},
When I remove the code that causes the problem, it works perfectly every time. 当我删除导致问题的代码时,它每次都能完美运行。 inputting the right word and giving the
var score
score of +10. 输入正确的单词并给出
var score
+10。
keyup
event works? keyup
事件如何工作? The keyup
event is triggered every time a key is released. 每次释放键都会触发
keyup
事件。
This means that if the target word is haromy
, when typing the h
, the event is triggered and the code in the callback is run. 这意味着如果目标单词为
haromy
,则在输入h
时会触发事件,并运行回调中的代码。
It means that the following will always be false if typing the first letter wrong. 这意味着如果第一个字母输入错误,以下内容将始终为假。
"haromy".toLowerCase().indexOf("f".toLowerCase()) === 0
So the user types a letter, it's not the same first letter, so the field is emptied immediatly by $(this).val("")
. 因此,用户键入字母,因为它不是相同的首字母,所以该字段立即由
$(this).val("")
清空。
If you want to check once the user unfocus the input, the blur
event would work. 如果您要在用户使输入失去焦点后进行检查,则
blur
事件将起作用。
If you want to make the check when the user clicks a button, use a click event on a new button. 如果要在用户单击按钮时进行检查,请在新按钮上使用click事件。
Do not set the initial CSS using jQuery's css
function. 不要使用jQuery的
css
函数设置初始CSS。 Keep the styling in a CSS file linked in the HTML. 将样式保留在HTML链接的CSS文件中。
Using the css
function only clutters your application logic, makes it difficult to maintain and delay the application of the style to after the JavaScript execution. 使用
css
函数只会使您的应用程序逻辑混乱,从而难以维护样式并将其延迟到JavaScript执行之后再应用。
I removed the backbone.js tag from the question as it's irrelevant, but seeing that you're using it and that it could be improved a lot, I'll throw additional information here. 我从问题中删除了ribs.js标记,因为它无关紧要,但是看到您正在使用它并且可以对其进行很多改进,我将在此处添加其他信息。
When using Backbone, don't bind events using jQuery directly. 使用Backbone时,请勿直接使用jQuery绑定事件。 Use the Backbone view's
events
hash. 使用主干视图的
events
哈希。
Your view could look like this: 您的视图可能如下所示:
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;
},
});
With styles out, the CSS file would be: 如果没有样式,则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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.