Блог

У меня есть простой код KnockoutJS для увеличения строк текстовой области, когда текстовая область имеет фокус.

     <div class='liveExample'> 
       <input type="text" value="" />
       <textarea data-bind="hasFocus: $root.applyIncreaseCols,  attr: { rows : 
     lines }"> </textarea>

       </div>
  

 var myModel = function() {

    this.lines=ko.observable("1");

    this.applyIncreaseCols = function(){
    //document.getElementById("thisone").cols="100";

    //alert("damn right");
     this.lines("3");

    };


 }

ko.applyBindings(new myModel());
  

Вы могли бы подписаться на наблюдаемую привязку к атрибуту hasFocus и переключить количество строк / rows здесь?

Я добавил простое и немного более продвинутое решение, первое в основном делает то, что вы искали.

Второй суммирует все разрывы строк в своем содержимом и использует это для определения требуемого количества строк 1. Вы могли бы проверить минимальное и максимальное значения и, возможно, иметь немного менее прыгающую форму, по крайней мере, с более естественным ощущением.

 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   1
  self.lines2 = ko.observable(2);
  self.content2 = ko.observable('');
  self.content2.subscribe(function (content2) {
    var linebreaks = content2.split(/rn|r|n/).length;
    self.lines2(linebreaks   1);
  });
}

ko.applyBindings(new myModel());  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<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>