Flexbox devtool i zmiana wartości w inputach

pytanie zadane 20 grudnia 2021 w JavaScript przez Whereismycode Obywatel (1,710 p.)

Witam. Piszę apkę dla klienta z dynamiczną zmianą wartości w inputach. Problem polega na tym, że gdy chcę wprowadzić wartość do textboxa z poziomu konsoli

$0.value = 2; //coś takiego

wprowadzona wartość wraca do bazowej. Zauważyłem, że z zaznaczonym flexbox'em wprowadzona wartość zostaje zmieniona na oczekiwaną

Pytanie czy można to w jakiś sposób objeść, aby klient nie musiał w konsoli zaznaczać tego flexboxa widocznego wyżej?

Pokaż 9 poprzednich komentarzy

komentarz 20 grudnia 2021 przez Whereismycode Obywatel (1,710 p.)

jsfiddle.net

Wrzuciłem na jsFiddle dla przejrzystości kodu.

1	komentarz 20 grudnia 2021 przez ScriptyChris Mędrzec (190,190 p.) Ale ten kod powinien być uruchamiany w konkretnym kontekście (najlepiej na Twoim przypadku), bo w powyższym snippecie jest po prostu luźno wyciągnięty fragment, którego nie da się przetestować.

komentarz 20 grudnia 2021 przez Whereismycode Obywatel (1,710 p.)

Jeszcze raz spróbowałem debugować i po zatrzymaniu kursor wskazywał na ten kod

t.defaultValue=""+n

czy to coś nam mówi? Czy mam szukać czegoś innego?

1	komentarz 20 grudnia 2021 przez ScriptyChris Mędrzec (190,190 p.) A co uruchamia ten fragment? Jakiś komponent/serwis/klasa?

komentarz 21 grudnia 2021 przez Whereismycode Obywatel (1,710 p.)

Okej udało mi się znaleźć rozwiązanie.

let input = document.querySelector("div.input-control > input[type=text]");
let lastValue = input.value;
input.value = 'new value';

let events = new Event('change', {bubbles: true});

events.simulated = ture;

let tracker = input._valueTracker;

if(tracker){
    tracker.setValue(lastValue);
}

input.dispatchEvent(events);

"hack method for react 16"

Może komuś się przyda odnośnik do GitHuba

1 odpowiedź

odpowiedź 20 grudnia 2021 przez Chess Szeryf (76,710 p.)

ev.target.value += 2;

document.querySelectorAll(".input-control input")[0]=1;

Wyjaśnij jeszcze raz, czego szukasz w konsoli, devtoolsach?

komentarz 20 grudnia 2021 przez Whereismycode Obywatel (1,710 p.)

Niestety podane propozycje nie rozwiązują mojego problemu.

Chcę zmieniać dynamicznie wartość inputu.

Zazwyczaj robiłem to w ten sposób

document.querySelector("div.input-control > input[type=text]").value = 2;    //
//wartość 2 to przykład i nie chcę robić incrementacji o 2 tylko sztywno zmieniać wartości np. 2, 400, 1023, 764 itd.

lub używając jQuery

ale w tym przypadku wprowadzenie danych za pomocą skryptu js w konsoli do inputu nie działa, bo serwer resetuje wartość do bazowej, ale tak jak wspomniałem wyżej. Działa gdy mam zaznaczony flexbox - >