読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

<input type="reset"> が使い物にならないので代用品を自作した

Javascript r42utils

<input type="reset">は、<form>タグで囲まれた入力フォームの値を、onload時点へ復元するためのフォーム部品です。


しかし、使ったことがある方でしたらご存知かと思いますが。
機能が中途半端すぎるため、実用的ではありません。その中途半端っぷりを挙げてみると…

  • formタグの中に囲まれた入力フォームしか復元してくれない
  • Javascriptで動的に値を変えた入力フォームの値は復元の対象外。コレは致命的だと思います。
  • textfieldの値を復元してくれない (Firefox系)

というわけで

フォーム値復元用ライブラリを自作しました。

r42utilsとして既にリリース済みです。もしご興味を持たれましたら、こちらからダウンロードをお願いします。


詳細についてはWikiをご覧頂ければと思いますが、使い方の例は次の通りです。

<html>

<head>
<script src="./FormResetter.js"></script>
</head>

<body>

    テキストフィールド <input type="text" value="123" />
    <br />
    <br />

    テキストフィールド(Javascriptで値を動的にセット) <input type="text" value="" id="dynText" />
    <script type="text/javascript">
        document.getElementById("dynText").value = "abc";
    </script>
    <br />
    <br />

    チェックボックス <input type="checkbox" checked="checked" />
    <br />
    <br />

    <input type="radio" name="sample" checked="checked" />ラジオ1
    <input type="radio" name="sample" />ラジオ2
    <br />
    <br />

    リストボックス
    <select>
        <option></option>
        <option selected="selected">1</option>
    </select>

    <script>
        var formResetter = new FormResetter(document);
        
        // フォームの入力値を記録する。
        formResetter.saveFormState();
    </script>

    <br />
    <br />
    <input type="button" value="復元する" onclick="formResetter.revertFormState();" />
    <input type="button" value="クリア" onclick="formResetter.clearFormState();" />


</body>
</html>