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

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

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

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

讓我們看看以下的例子

<br /><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);

<br />jQuery

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

<br />Output

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

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

為什麼呢?

這要從 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

廣告

HTML Input defaultValue vs. value with jQuery val() vs. attr() 有 “ 1 則留言 ”

  1. 引用通告: HTML Input hidden defaultValue vs. value with jQuery val() vs. attr() | 不怕就是強

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s