如何在 Blazor Server 应用程序的 Razor 页面中通过标记代码（单击输入字段时）清空文本输入字段？

Question

I have a text input field in my razor page, where the client should enter an IP address. The initial text of the input field is "Enter IP adress here". As soon as the client clicks into the input field, I want that the "Enter IP adress here" text dissapears, so that the client can write the IP address. I have tried following code with "bind", but didn't work. As you in the code, I have tried both with onclick and onselect events of the input field to delete the text.

@page "/connect2"

<h>How do you want to select your MAE?</h>
<br>
<select @onchange="func_ST">
<option value="">-- Select MAE from List --</option>
<option value="">-- Enter IP address --</option>
</select>

@if (TagService.selectedString_ST == "-- Enter IP address --")
{
<input type="text" @bind="@TagService.IP_Manuel"  onclick="func_IP_Set" onselect="func_IP_Set" >
}


@code {
async void func_ST(Microsoft.AspNetCore.Components.ChangeEventArgs e)
{
    if (TagService.selectedString_ST == "-- Enter IP address --")
    {
        TagService.IP_Manuel = "Enter IP";
        StateHasChanged();
    }

}
async void func_IP_Set()
{
    if(TagService.IP_Manuel=="Enter IP")
    {
        TagService.IP_Manuel = "";
        StateHasChanged();
    }
}
}

Answer 1

For simplicity, you might consider the placeholder attribute instead. The placeholder text will appear when no value is set in the input and disappear once a value is entered.

 <input type="text" placeholder="-- Enter IP address --">

Answer 2

A separate Label tag would be better than a placeholder within the input tag. This is because the label is then accessible if needed.

If you put a label tag under your input, it'll work exactly how you want it..

<input type="text" id=“text” />
<label for=“text”>IP Address</label>