Hey, I need to implement a feature that works like this:
- User has
input
field - When he starts typing, I track if this text is overflown
- (What I need to implement) If text is overflown,
input
changes totextarea
, and back if text is reduced, and afterall share the text betweeninput
andtextarea
So far I have the following code:
<div class="container">
{{#if multiline}}
<textarea class="size"></textarea>
{{else}}
<input type="text" class="size" />
{{/if}}
</div>
The most obvious way I see to implement this feature is using Session
, I have the following function:
multiline: function () {
Session.get("multiline");
if ($(".size > input").prop('scrollWidth') > $(".size > input").width() ) {
Session.set("multiline", true);
} else {
Session.set("multiline", false);
}
}
So as you can see I calculate current sting’s length to see if it’s overflown. If I check Session
variable in console, I can see that this calculation works the way I want, but input
doesn’t transform to textarea
when Session("multiple")
equals true.
Where am I wrong? Or may be there are other ways to implement what I need?
Thanks!