Attributo del valore di input HTML - stesso input, (apparentemente) risultati diversi

Question

Come funziona l'attributo value per il tag di input html dopo una modifica tramite la casella di input?

esempio:

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

questo mostrerà una casella di input con il testo "Ciao mondo". Se modifico che inputing una nuova stringa nella casella di testo reso (non tramite il codice grezzo), e poi cercare di ottenere il suo valore utilizzando js come questo

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

io, giustamente, ottenere il nuovo valore. Ma se controllo l'elemento tramite gli strumenti di sviluppo di Chrome (o firebug o qualsiasi cosa tu preferisca), vedrò la stessa stringa "Hello world" com'era all'inizio ..

Quale dei due è il giusto uno? valore di js o ispettore di cromo?

Ecco il Example Fiddle ed ecco uno screenshot

sono arrivato fino a questo durante il tentativo di trovare una soluzione a questo problema: situazione negozio Classic, ho una tabella con tag input X, in cui un utente può inserire il quantità di X articoli. Devo controllare se uno o più valori sono cambiati rispetto al valore precedente di ciascun input: se il confronto tra OLD e NEW val restituisce che il valore è cambiato, devo aggiornare l'ordine. Altrimenti non è necessario salvare/aggiornare.

Pensavo di poter usare attr. "valore" per memorizzare il "vecchio" valore dell'input, ma probabilmente non era la scelta migliore ..

Qualcuno può spiegare questo comportamento? È solo un problema di "aggiornamento" o c'è qualcos'altro dietro?

Answer 1

Entrambi hanno ragione, mostrano solo cose diverse.

Il DOM valueproprietà ti dà il valore attuale .

Il codice HTML valueattributo ti dà il valore didi default (lo stesso del DOM defaultValueproprietà).

L'ispettore DOM di Chrome mostra i valori degli attributi nella visualizzazione HTML. Devi guardare la vista delle proprietà per vedere i valori delle proprietà.

Answer 2

È possibile assegnare un cosiddetto attributo proprietaria all'ingresso; ad esempio "oldval" in modo da poterlo confrontare successivamente con il valore corrente

Answer 3

Puoi trovare informazioni in questo article.

il valore visualizzato in html è il valore predefinito con cui viene caricato il modulo. Se si desidera aggiornare anche il DOM, è necessario utilizzare ele.setAttribute ("valore", "nuovo valore")

Se si desidera sapere se un elemento è stato modificato, è preferibile allegare un evento onchange a gli elementi di input e contrassegnare qualche flag nel gestore modifiche per sapere se il modulo è stato modificato o meno.