Initializing the height of a textarea based on the content using a knockout data-bind - html

Question

I am currently expanding and collapsing the height of a text area on the keyupevent. However I want the text area also to initialise it's height once the value is binded to the text area via a knockout custom binding. Any solutions?
(With the use of only javascript) (Without adding any jquery libraries)
Current key up handelling code
var textElement = $textBox.get(0);
var textElementOriginalHeight = $textBox.height();
while ($textBox.height() > textElementOriginalHeight && textElement.scrollHeight < textElement.offsetHeight) {
$textBox.height($textBox.height() - 1);
}
var h = 0;
while (textElement.scrollHeight > textElement.offsetHeight && h !== textElement.offsetHeight) {
h = textElement.offsetHeight;
$textBox.height($textBox.height() + 1);
}

Answer 1

You're gonna need to register a custom binding-handler to do that. Something like:
(function(ko)
{
function handleAutoFit(textElement, val)
{
if (!textElement.value)
textElement.value = val;
var $textBox = $(textElement);
var textElementOriginalHeight = $textBox.height();
while ($textBox.height() > textElementOriginalHeight && textElement.scrollHeight < textElement.offsetHeight) {
$textBox.height($textBox.height() - 1);
}
var h = 0;
while (textElement.scrollHeight > textElement.offsetHeight && h !== textElement.offsetHeight) {
h = textElement.offsetHeight;
$textBox.height($textBox.height() + 1);
}
}
ko.bindingHandlers.autoFit = {
update: function (element, valueAccessor) {
var val = ko.unwrap(valueAccessor());
handleAutoFit(element, val);
}
};
})(ko);
HTML:
<textarea data-bind="autoFit: someObservable, value: someObservable, valueUpdate: 'afterkeydown'"></textarea>
Or if you're using the Knockout 3.1 and above:
<textarea data-bind="autoFit: someObservable, textInput: someObservable"></textarea>
See Fiddle