Question

我的meteor-app中有一个输入字段，我想检查是否有一些内容，因为输入字段的位置取决于是否有输入值。如果用户开始输入（最少一个字符），输入字段将移动到页面顶部。

在我目前的解决方案中，我正在寻找一个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）如果用户键入了“任何内容”，则课程将被更改8次 - 虽然您没有看到，但编码非常糟糕，不是吗？< / p>

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

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

Answer 1

要处理字段中的剪切和粘贴操作，而要求字段失去焦点，请使用input事件。您还可以使用jQuery＆＃39; 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);
    }
});

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

1 个答案: