Skip to content

Instantly share code, notes, and snippets.

@diamondcoder

diamondcoder/index.html

Created April 2, 2019 21:03
Show Gist options
  • Save diamondcoder/8976e802e996994e8703780e00d00cfe to your computer and use it in GitHub Desktop.
Save diamondcoder/8976e802e996994e8703780e00d00cfe to your computer and use it in GitHub Desktop.
Download ZIP
TextareaStrechOnFocus created by diamondcoder1 - https://repl.it/@diamondcoder1/TextareaStrechOnFocus
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<body>
<div class='liveExample'>
simple:
<textarea data-bind="hasFocus: isFocus, attr: { rows: lines }"> </textarea>
<br />
advanced:
<textarea data-bind="attr: { rows: lines2 }, textInput: content2"> </textarea>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var myModel = function() {
//to make sure we're working against the myModel scope
var self = this;
// simple expanding textarea
self.lines = ko.observable(1);
self.isFocus = ko.observable(false);
self.isFocus.subscribe(function(isFocus) {
self.lines(isFocus ? 3 : 1);
});
// expanding textarea by amount linebreaks coming in from content2 + 1
self.lines2 = ko.observable(2);
self.content2 = ko.observable('');
self.content2.subscribe(function (content2) {
var linebreaks = content2.split(/\r\n|\r|\n/).length;
self.lines2(linebreaks + 1);
});
}
ko.applyBindings(new myModel());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment