Question

我需要实现一个像这样工作的功能： 1.用户有input字段 2.当他开始输入时，我会跟踪这个文本是否溢出 3.（我需要实现的内容）如果文本溢出，input将更改为textarea，如果文本减少则返回，并且在input和{{1}之间共享文本}

到目前为止，我有以下代码：

textarea

我看到实现此功能最明显的方法是使用<div class="container"> {{#if multiline}} <textarea class="size"></textarea> {{else}} <input type="text" class="size" /> {{/if}} </div>，我有以下功能：

Session

因为你可以看到我计算当前刺痛的长度以查看它是否溢出。如果我在控制台中检查multiline: function () { Session.get("multiline"); if ($(".size > input").prop('scrollWidth') > $(".size > input").width() ) { Session.set("multiline", true); } else { Session.set("multiline", false); } }变量，我可以看到此计算以我想要的方式运行，但Session在input等于true时无法转换为textarea 。我哪里错了？或者可能有其他方法来实现我需要的东西？谢谢！

Answer 1

很容易。我在helpers和events之间保留了html和逻辑。我的新multiline助手看起来像这样：

multiline: function () {
    return Session.get("multiline");
  }

我向Template.body.events添加了一个如下所示的事件：

"keyup .size": function (event, template) {
        if (event.target.scrollWidth > event.target.offsetWidth) {
            Session.set("multiline", true)
        }
    }

像魅力一样工作。

Meteor + Blaze，将一个html标签替换为另一个

1 个答案: