Updated: 2017-04-13 17:33:17 CST +08

HTML Input defaultValue vs. value with jQuery val() vs. attr()

Problem

最近遇到有人想要把現有的 input tag 使用 .val(value) 改值以後,append 到另一個 form 上,結果發現怎麼 input 呈現的 value 沒變?!

但實驗過後 .attr(‘value’, value) 可以成功!

那這個 attribute 和 value 到底哪裡不一樣呢?

讓我們看看以下的例子

Example


<form><input name="test" type="text" value="abc" />
<input name="test2" type="text" value="abc" /></form>

Javascript

document.getElementsByName('test')[0].value = 123;
document.getElementsByName('test')[0].setAttribute('value', 123);
console.log(document.getElementsByTagName('form')[0].innerHTML);

jQuery

$('input[name="test"]').val(123);
$('input[name="test"]').attr('value', 123);
console.log($('form').html());

Output

<input name="test" type="text" value="abc" />
<input name="test2" type="text" value="123" />

我們可以看到改變 attribute 的話元素本身的 html 也會被改變。 但是改變 value 的話,元素本身的 html 是不會被改變的。

Explain

為什麼呢?

這要從Input 的屬性來看,可以看到裡面有 defaultValue 與 value 兩個關於 value 的值。

在 html 一開始 render 的時候,defaultValue 和 value 會是一樣的。

在 input 的欄位打上你想要的值,或是使用 javascript 改變 input 的 value 時,改變的是它的 value,defaultValue 並不會被改變,它依舊會是一開始被 render 時預設的那個值。

使用 value, val() 方法,改變的是蓋在 input 元素上面的東西,而不會真正改變它的本質。

而因為元素的 html 並沒有真正的被改變,所以使用 html 方法時,拿到的就會是它最原始的樣子。

要改變元素的本質,必須更改元素 value 的 attribute,也就是它的 defaultValue,則需要使用 attribute 相關 method: setAttribute, attr()。

如果想要更瞭解,可以查查 value attribute 與 value property。 以為這一切都沒事了嗎?

不,把 type 改成 hidden,value 和 val() 卻都成功改變了 html…

因為這實在是太 geek 了,所以寫另一篇探討。

HTML Input hidden defaultValue vs. value with jQuery val() vs. attr()

Reference