Atrybut wartości wejściowej HTML - to samo wejście, (widocznie) różne wyniki

Question

Jak działa atrybut wartości dla tagu wejściowego html po edycji za pomocą inputbox?

przykład:

<input type="text" name="test" id="test" value="Hello world" /> 

to pokaże pole wejściowe z tekstem "Hello World". Gdybym go edytować inputing nowy ciąg do świadczonych tekstowym (nie poprzez kod surowca), a następnie postarać się o jego wartość za pomocą js jak ten

alert(document.getElementById('test').value) 

będę słusznie uzyskać nową wartość. Ale jeśli sprawdzę element za pomocą narzędzi programistycznych Chrome (lub firebuga lub cokolwiek, co wolisz), zobaczę ten sam ciąg znaków "Hello world" jak na początku ..

Który z tych dwóch elementów jest właściwy jeden? wartość js lub inspektor chrome?

Oto Example Fiddle i oto screenshot

doszedłem do tego, starając się znaleźć rozwiązanie tego problemu: Klasyczny sklepu sytuacji, mam tabelę z tagiem wejść X, gdzie użytkownik może wprowadzić ilość X elementów. Muszę sprawdzić, czy jedna lub więcej wartości uległy zmianie od poprzedniej wartości każdego wejścia: jeśli porównanie między OLD i NEW val zwraca, że ​​wartość zmieniła się, muszę zaktualizować zamówienie. W przeciwnym razie nie trzeba zapisywać/aktualizować.

Pomyślałem, że mogę użyć attr. "value" do przechowywania "starej" wartości wejścia, ale prawdopodobnie nie był najlepszym wyborem.

Czy ktoś może wyjaśnić to zachowanie? To tylko problem "odświeżania", czy jest coś jeszcze w tyle?

Answer 1

Obie mają rację, pokazują tylko różne rzeczy.

DOM valuewłasności daje bieżącą wartość.

HTML valueatrybut daje domyślny wartość (taka sama jak DOM defaultValuewłasności).

Inspektor DOM przeglądarki pokazuje wartości atrybutów w widoku HTML. Musisz spojrzeć na widok właściwości, aby zobaczyć wartości właściwości.

Answer 2

można przypisać tzw zastrzeżonych atrybut do wejścia; na przykład "oldval", aby później można było porównać go z aktualną wartością:

Answer 3

Możesz znaleźć informacje w tym article.

Wartość widoczna w html jest wartością domyślną, w którą załadowany jest formularz. Jeśli chcesz, aby DOM aktualizował się, musisz użyć ele.setAttribute ("wartość", "nowa wartość")

Jeśli chcesz się dowiedzieć, czy element został zmieniony, najlepiej jest dołączyć wydarzenie onchange do elementy wejściowe i zaznacz flagę w procedurze zmiany, aby wiedzieć, czy formularz się zmienił, czy nie.