52
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQuery で input の value を変更する際に attr は使用しない方がいい

Last updated at Posted at 2014-10-24

jQuery で、input の value 値を変更する際に、.val('値') と .attr('value', '値') があるのですが。今回これで少しハマったのでメモします。
※ chrome 38.0.2125.104 で確認しています

.attr('value', '値') の問題点

初期値を設定する場合は問題なく動作するのですが、一度ユーザーが編集もしくは、.val('値') によって編集されてしまうと、動作しなくなります。

実際に jsfiddle でサンプルを作成しました。
http://jsfiddle.net/kazunari_yamashiro/zzjaftva/1/

変更(attr) ボタンを連打すると、value として cnt がインクリメントしているのが確認できます。
しかし、input の中身を直接編集するかもしくは、変更(val) のボタンを押すと、変更(attr) ボタンを押しても中身の変更が行われなくなります。
しかし、直接編集後も、変更(val) は有効です。

結論

なぜそうなるのか、についてはわかりませんが**※下記追記しました。**input の value を変更する際は .val('値') を使用する方が無難なようです。

追記

value プロパティと value 属性のアクセスの違いのようです。
http://www.softel.co.jp/blogs/tech/archives/1595

.attr() は setAttribute を利用していて
.val() は value のプロパティアクセスをしているように思われます。

52
47
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?