MemoEdit component

MemoEdit is used to create multiline text input (<textarea>).

Examples

Basic

<MemoEdit Rows="5" />

Tab override

By default a <textarea> will lose focus when you press the tab key. If you want to allow tabs to be entered you just need to enable it with ReplaceTab, and optionally a TabSize parameter.
<MemoEdit Rows="5" ReplaceTab TabSize="4" />

Auto size

If you want to grow the MemoEdit along with its content they you just need to define an AutoSize parameter.
<MemoEdit Rows="5" AutoSize />

Binding

Two-way binding

By using bind-* attribute the text will be automatically assigned to the member variable.
<MemoEdit @bind-Text="@description" />
@code{
    string description;
}

Mannual event binding

When using the event TextChanged, you also must define the Text value attribute.
<MemoEdit Text="@description" TextChanged="@OnDescriptionChanged" />
@code{
    string description;

    Task OnDescriptionChanged( string value )
    {
        description = value;

        return Task.CompletedTask;
    }
}

Settings

Text Changed mode

By default the TextChanged event will be raised on every keypress. To override default behavior of TextChanged event and to disable the change on every keypress you must set the ChangeTextOnKeyPress to false on application start. After setting it to false the event will be raised only after the input loses focus.
public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.ChangeTextOnKeyPress = false;
    } );
}

Text Delay mode

Because of some limitations in Blazor, sometimes there can be problems when ChangeTextOnKeyPress is enabled. Basically if you try to type too fast into the text field the caret can jump randomly from current selection to the end of the text. To prevent that behaviour you need to enable DelayTextOnKeyPress. Once enabled it will slightly delay every value entered into the field to allow the Blazor engine to do it’s thing. By default this option is disabled.
public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.DelayTextOnKeyPress = true;
      options.DelayTextOnKeyPressInterval = 300;
    } );
}

Attributes

Name Description Type Default
Text Input value. string null
TextChanged Occurs after text has changed. EventCallback<string>
Plaintext Remove the default form field styling and preserve the correct margin and padding. bool false
ReadOnly Prevents modification of the input’s value. bool false
Disabled Prevents user interactions and make it appear lighter. bool false
MaxLength Specifies the maximum number of characters allowed in the input element. int? null
Placeholder Sets the placeholder for the empty text. string null
Rows Specifies the number lines in the input element. int? null
Size Component size variations. Size
ChangeTextOnKeyPress If true the text in will be changed after each key press (overrides global settings). bool? null
DelayTextOnKeyPress If true the entered text will be slightly delayed before submitting it to the internal value. bool? null
DelayTextOnKeyPressInterval Interval in milliseconds that entered text will be delayed from submitting to the internal value. bool? null
ReplaceTab If set to true, ReplaceTab will insert a tab instead of cycle input focus. bool false
TabSize Defines the number of characters that tab key will override. int 4
SoftTabs If set to true, spaces will be used instead of a tab character bool true
AutoSize If true, the textarea will automatically grow in height according to its content. bool false