检查输入字段是否具有切换某些类的值

Question

我在我的流星应用程序中有一个输入字段，我想检查是否有一些内容，因为输入字段的位置取决于是否有输入值。如果用户开始输入（最少一个字符），输入字段将移至页面顶部。

在我当前的解决方案中，我正在寻找一个 keyup 事件来检查是否有值。如果有值，将添加一个类并删除另一个类。 如果输入字段为空，则相反。

Template.search.events({
    'keyup input': function(event, template) {
        if (event.target.value.length) {
            $('#wrapper').addClass('top');
            $('#result').removeClass('hide');
        }
        else {
            $('#wrapper').removeClass('top');
            $('#result').addClass('hide');
        }
    }
});

我的问题

1) 我认为 keyup 事件不是用户粘贴或剪切内容的最佳方式。

2) 如果用户键入“anything”，类将被更改 8 次——虽然你没有看到，但这是相当糟糕的编码，不是吗？

3) 如果我可以避免多次循环，我可以使用 toggleClass...

PS：在会话变量中保存一些信息可能有用吗？ （我只是头脑风暴）

Answer 1

要处理字段中的剪切和粘贴操作而不要求字段失去焦点，请使用input 事件。你也可以使用 jQuery 的toggleClass 来简化你的代码：

Template.search.events({
    'input input': function(event, template) { // first input is the event, second is the object
        var hasContent = event.target.value.length > 0;
        $('#wrapper').toggleClass('top',hasContent);
        $('#result').toggleClass('hide',!hasContent);
    }
});