javascript - javascriptキーと値のペア配列を文字列に変換する方法

Question

次のようなフィールドにキーと値の配列を格納する必要があります。

<input type="text" id="test" >{key1="a"}{key2="b"}</input>

どうすればそれを読んで更新できますか?

Answer 1

入力タグが無効です。自己閉鎖する必要があります。

つまり、JSON を内部に持つ data-* 属性としてデータを保存します。

<input data-val='{ "key1": "a", "key2": "b"}' type="text" id="test" />

そこから、値の読み取り、解析、更新、文字列化、属性の更新を行うことができます。

---

このようなものから始める必要がありますが、一部の古いブラウザーでは機能しないことに注意してください。そのため、JSON.parse/stringify. 考えてみれば、IE7 ではサポートされていませんgetAttribute。setAttributeこれらのブラウザの回避策が何であるかはわかりません。

var inp = document.getElementById('test');
var obj = JSON.parse(inp.getAttribute('data-val'));

console.log(obj);

obj.key1 = "updated";
obj.key3 = "foo";

inp.setAttribute('data-val', JSON.stringify(obj));

console.log("updated", inp.getAttribute('data-val'));

デモ