Chrome のオートコンプリート入力後にテキストボックスをクリアした時の背景色をなんとかしたい

Question

Chrome で住所などを入力する際に、自動入力を使うことができます。
また、自動入力時はテキストボックスの背景色が黄色になります。

<form name="name1" method="post">
  都道府県：<input type="text" x-autocompletetype="state" id="id1">
  市区町村：<input type="text" x-autocompletetype="city" id="id2">
  住所1：<input type="text" x-autocompletetype="address-line1" id="id3">
</form>
<button onclick="testClear()">Clear</button>

function testClear() {
  document.name1.id1.value = "";
}

このとき、次のような操作を行うと、背景色が元に戻りません（黄色が解除されない）。

1. 自動入力によってテキストボックスに値を入力する
2. JavaScript による操作によって、一部のテキストボックスだけを空にする

（一部なので、Reset を利用しない）

キー操作やマウス操作によるテキストボックスのクリアでは背景色が元に戻りますが、このような操作で上手く背景色を解除する方法がないでしょうか。。。

回避方法として、そもそもオートコンプリートを利用しない、CSS（:-webkit-autofill）の背景色を定義しておく等の方法はあるかと思います。

もし、何か良い方法をご存じでしたらご教授頂ければ幸いです。

Answer 1

オートコンプリートしたら黄色くしたいけど、jsの操作をしたときに色も戻したいということですね

clone したのと replace すれば元に戻ります

function resetColor(elem){
    elem.parentElement.replaceChild(elem.cloneNode(true), elem)
}

この関数に元に戻したい要素を渡せば元通りです

Comments

[think49]

その方法ですとオートコンプリートだけでなく、該当要素ノードを参照するAPI全てが初期化されます(WeakMap, addEventListener 等)。
私個人としては、Google Chrome の表示バグの為に他の実装にも影響が出る回避手段をとるのはお勧めしがたいですね…。

[ryls-nmm]

バグがあろうと、その環境で動かさないといけない以上どこかで妥協しないとだと思うんですよね

イベントは親が受け取るようにすればいいですが、WeakMap なども考えだすと同じ要素のほうが良さそうです
DOMツリーから除外しても色は戻らず reset したときくらいしか JavaScript で戻せなさそうだったので reset する方法にしました

これなら他に影響でないかな？

```javascript
function resetColor(elem){
    var parent = elem.parentElement
    var dummy = document.createElement("div")
    parent.replaceChild(dummy, elem)
    var backup = elem.value

    var form = document.createElement("form")
    form.appendChild(elem)
    form.reset()

    elem.value = backup
    parent.replaceChild(elem, dummy)
}
```

backup は value プロパティだけですが足りないなら適宜追加する形でお願いします

[aoi70]

大変参考になりました！ありがとうございます