Blazor - zaznaczenie tekstu w inpucie vs @onchange:stopPropagation="true"

0

Mam inputa z datą. Gdy klikam strzałką w prawo lub w lewo to powinna zaznaczać się odpowiednia część daty (dzień/miesiąc/rok).
Aby spełnić ten efekt musiałem na onchange ustawić @onkeydown:preventDefault="true" (inaczej funkcja odpowiedzialna za zaznaczenie tekstu nie chciała działać - pole się nie zaznaczało).

Obecnie mam analogiczny problem tj. gdy mam zaznaczone pole z dniem i zacznę pisać to zaznaczenie powinno być cały czas aktywne (po wprowadzeniu znaku tekst powinien się ponownie zaznaczać).

Problem jest taki, że jak zaczynam pisać to zaznaczenie znika - mimo, że po wprowadzeniu znaku powinna ponownie zostać wywołana funkcja, która zaznacza tekst. Zakładam, że problem leży w jakiś domyślnych ustawieniach działania jakiegoś eventu. Próbowałem jednak wyłączyć domyślne zachowanie chyba każdego eventu, ale nic nie przynosi zamierzonego efektu.

Czy ktoś się orientuje który event powinien być wyłączony, albo z czego to może jeszcze wynikać? Tak jak pisałem próbowałem chyba ze wszystkimi eventami w tym przede wszystkim @onchange, @oninput, @onkeydown, @onclick itd.

screenshot-20211205043504.png

0

Sprawdź czy na innej przeglądarkę występuje ten sam problem. Druga sprawa to input działa na znormalizowanym formacie daty yyyy-MM-dd https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#handling_browser_support
Zły format może powodować nietypowe zachowanie inputa

0

@Ales: chyba nie do końca zrozumiałeś mój problem.
Kod wygląda jak poniżej. Pytanie: dlaczego w momencie wywołania funkcji OnKeyUp() nie zaznacza się tekst? W przypadku pozostałych funkcji np. UpdateOnLeftArrow() tekst jest zaznaczany. Różnica jest tylko taka, że w funkcji OnKeyUp() generuję nowy ciąg znaków - i chcę, żeby z automatu fragment był zaznaczany.

@inject IJSRuntime JsRuntime;

<input 
    type="text"
    @bind-value="@text" 
	@bind-value:event="oninput" 
	@ref="ref_to_input"
    @onkeydown="@(async e => await OnKeyDown(e))"
	@onkeydown:preventDefault="preventDefault"
/>

@code {
	private string text { get; set; } = Guid.NewGuid().ToString().Substring(0,10);
	private bool preventDefault = true;
	private ElementReference ref_to_input;
	private int SelectionStart = 2;

	private async Task UpdateOnLeftArrow()
		{
		++SelectionStart;
		await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ref_to_input, SelectionStart, SelectionStart+1); //<= it works!
		}

	private async Task UpdateOnRightArrow()
		{
		--SelectionStart;
		await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ref_to_input, SelectionStart, SelectionStart+1);	//<= it works!
		}

	private async Task OnKeyUp()
		{
		text = Guid.NewGuid().ToString().Substring(0,10);
		await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ref_to_input, 0, 3); //<= why doesn't it work???
		}

    private async Task OnKeyDown(KeyboardEventArgs e)
        {
		switch(e.Code)
			{
			case "ArrowLeft":
				{
				await UpdateOnLeftArrow();
				break;
				}
			case "ArrowRight":
				{
				await UpdateOnRightArrow();
				break;
				}
			case "ArrowUp":
				{
				await OnKeyUp();
				break;
				}
			}
        }
}

JS:

function SelectionPartOfText(reference, start_position, end_position) {
	reference.setSelectionRange(start_position, end_position);
}
0

W pierwszym poście piszesz o dacie a w drugim kod wskazuje na guid?
W OnKeyUp zakomentuj sobie przypisywanie nowego guid. Zaznaczenie działa? Jeśli tak to wywołuje ci się event oninput po wyjściu z funkcji. Spróbuj dodać statehaschanged po text = guid.newguid... lub obsłuż oninput i w nim wywołuj zaznaczenie

0

@Ales: To pole ma być dla daty, ale aby uprościć przykład zmieniłem na guid - problem jest ten sam, ale kodu dużo mniej.
Możliwe, że masz rację, ale nie mogę sobie poradzić aby pole z jednej strony się zmieniło a jednocześnie aby w tym czasie zaznaczył się element - albo nie działa jedno (nie zmienia się pole) albo drugie (nie zaznacza się fragment kodu).
Problemem jest również to, że jak zrobię:

    @bind-value="@text" 
    @bind-value:event="oninput" 

to nie mogę już obsłużyć oninput.

0

Okey, znalazłem dziada - to onkeyup powodował problem... w sensie kasował zaznaczenie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1