Backbone.js文本框输入事件名及视图中onkeyup函数实现方法

文本框输入对应的Backbone事件名称 #

Backbone支持直接绑定原生DOM事件到视图方法，文本框输入常用的事件有：

• keyup：用户松开按键时触发，对应你原来的onkeyup逻辑
• keydown：用户按下按键瞬间触发
• keypress：用户按下按键并产生字符时触发（方向键等无字符按键不会触发）
• input：文本框内容发生任何变化时触发（包括输入、粘贴、拖拽文本等操作，兼容性更全面）

改造你的搜索视图代码 #

你当前使用的change input事件只会在文本框失去焦点时触发，要实现输入时实时触发searchEvent，只需修改视图的events配置，替换成对应事件即可。同时可以通过事件对象直接获取输入框的值。

修改后的完整代码：

var MyQuizSearchView = Backbone.View.extend({
    model: myQuizC,
    el: $('#search'),
    events: {
        // 替换为keyup事件，对应原onkeyup逻辑；也可换成input事件覆盖更多输入场景
        "keyup input": "searchEvent"
    },
    initialize: function() {
        this.render()
    },
    render: function() {
        var block1 = '  <input type="text" placeholder="What are you looking for?">'
        this.$el.append(block1)
    },
    searchEvent: function(event) {
        // 获取输入框的当前值
        var searchValue = event.target.value;
        console.log("搜索内容:", searchValue);
        // 这里可直接调用你的搜索逻辑，比如 searchByTags(searchValue)
    }
})
var myQuizSearchView = new MyQuizSearchView();

额外提示 #

• 如果想要更灵敏的实时响应（比如粘贴文本也触发搜索），可以把keyup input换成input input，input事件能覆盖所有导致文本内容变更的操作。
• Backbone的事件绑定采用委托模式，不需要在HTML中写inline的onkeyup，这种写法更符合MVC解耦的设计思想，也便于后续维护。

内容的提问来源于stack exchange，提问作者Kavishka Rajapakshe