46 lines
1.4 KiB
Plaintext
46 lines
1.4 KiB
Plaintext
@* Masked input for tire sizes in the format ###/## R## (e.g. 225/45 R17).
|
|
The user only types digits; separators are inserted automatically. *@
|
|
|
|
<input type="text"
|
|
class="form-control @CssClass"
|
|
inputmode="numeric"
|
|
maxlength="10"
|
|
placeholder="@Placeholder"
|
|
value="@Value"
|
|
@oninput="OnInput" />
|
|
|
|
@code {
|
|
[Parameter] public string? Value { get; set; }
|
|
[Parameter] public EventCallback<string?> ValueChanged { get; set; }
|
|
[Parameter] public string Placeholder { get; set; } = "z.B. 225/45 R17";
|
|
[Parameter] public string? CssClass { get; set; }
|
|
|
|
private async Task OnInput(ChangeEventArgs e)
|
|
{
|
|
var raw = e.Value?.ToString() ?? string.Empty;
|
|
var formatted = FormatTireSize(raw);
|
|
Value = formatted;
|
|
await ValueChanged.InvokeAsync(formatted);
|
|
}
|
|
|
|
/// <summary>
|
|
/// Formats digit input into the tire size mask ###/## R##.
|
|
/// Examples: "2254517" -> "225/45 R17", "22545" -> "225/45", "225" -> "225"
|
|
/// </summary>
|
|
private static string FormatTireSize(string input)
|
|
{
|
|
var digits = new string(input.Where(char.IsDigit).Take(7).ToArray());
|
|
|
|
if (digits.Length == 0)
|
|
return string.Empty;
|
|
|
|
if (digits.Length <= 3)
|
|
return digits;
|
|
|
|
if (digits.Length <= 5)
|
|
return $"{digits[..3]}/{digits[3..]}";
|
|
|
|
return $"{digits[..3]}/{digits[3..5]} R{digits[5..]}";
|
|
}
|
|
}
|