Растущая TextArea в Blazor - PullRequest
Новая
       52

Растущая TextArea в Blazor

0 голосов
/ 30 сентября 2019

Мне нужна текстовая область, которая увеличивается с увеличением количества строк. Как только строки будут удалены, TextArea снова уменьшится. В лучшем случае с максимальной высотой.

Как это работает с Javascript, я уже мог прочитать здесь: textarea-to-resize-based-content-length

Но в Blazor, к сожалению, насколько я знаю, нет никакого scrollHeight для TextArea.

(Моя проблема связана с фреймворком Blazor , который позволяет разработку веб-интерфейса браузера с использованием C # (+ HTML / CSS), а не настольного пользовательского интерфейса, такого как WPF / WinForms.)

1 Ответ

1 голос
/ 30 сентября 2019

Пока вы знаете, сколько строк в вашем тексте, вы можете просто использовать атрибут "rows" в TextView, как это 

<textarea rows="@Rows"
          @bind-value="MyText"
          @bind-value:event="oninput" />

И в своем коде вы можете определить значениедля строк

Обратите внимание, я использую Math.Max ​​(Rows, 2), чтобы сохранить минимум две строки. 

private void CalculateSize(string value)
{
  Rows = Math.Max(value.Split('\n').Length, value.Split('\r').Length);
  Rows = Math.Max(Rows, 2);
}

Я вызываю CalculateSize из кода, который обрабатывает изменения в «MyText» -либо пользовательский установщик, подобный этому, либо метод ANOther 

string _myText;
protected string MyText
{
  get => _myText;
  set
  {
    _myText = value; 
    CalculateSize(value);
  }
}

Максимальная высота может быть легко установлена ​​либо с помощью CSS для подхода к проектированию, либо путем добавления другого ограничения в метод CalculateSize. 

private void CalculateSize(string value)
{
  Rows = Math.Max(value.Split('\n').Length, value.Split('\r').Length);
  Rows = Math.Max(Rows, MIN_ROWS);
  Rows = Math.Min(Rows, MAX_ROWS);
}

Вариант 2

Если вы хотите простоты и не возражаете против встроенного JS (если вы этого захотите, то пришло время взломать JSInterop ....) 

<textarea 
      rows="2" 
      placeholder="Sample text."
      style="resize:both;"
      oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';">
</textarea>

Вариант 3

Если вы действительно хотите использовать JSInterop, вы можете сделать что-то подобное или поместить свой код в файл JS и включить его на страницу. 

<textarea id="MyTextArea"
      rows="2" 
      placeholder="Sample text."
      @oninput="Resize"></textarea>

<label>This area is @(MyHeight)px</label>
@code
{
[Inject] IJSRuntime JSRuntime { get; set; }
double MyHeight=0;
async Task Resize()
{
    var result = await JSRuntime.InvokeAsync<object>("eval",@"(function() {
            MyTextArea.style.height='auto';
            MyTextArea.style.height=(MyTextArea.scrollHeight)+'px';
            return MyTextArea.scrollHeight;
        })()");
    Double.TryParse(result.ToString(), out MyHeight);
}
}
...