jQuery | テキストボックスに入れた値をクリアする
目次
経緯
目次ジェネレータという、目次を作るためのHTMLを自動生成するブラウザアプリを作っていたのですが、入力をミスったときとか、新しいHTMLを生成したいときに項目をいちいちBackspaceを押しながら消していくのが面倒だと思いました。
こんな風に、値を入力したとして・・・
はっと間違っていることに気付く・・・
そのときに、「入力をクリアする」というボタンを押せば、
入力を消すことができる!
こんな機能を作りたいと思いました。
テキストボックスの値をクリアする
まずボタンですが、以下のように書きます。
Bootstrapを使っています。
<div class="btn-group"> <button type="button" class="btn btn-info" id="inputClearBtn">入力をクリアする</button> </div>
そいで、このボタンが押されたら、clearInputInfoという関数を呼びます。
$("#inputClearBtn").on("click", function() { clearInputInfo(); });
その関数がこちらです。
var clearInputInfo = function () { $("#mokujiTable tbody > tr").each(function() { $(this).find('input.komoku').val(''); $(this).find('input.tag').val(''); }); };
テーブルに設定したid="mokujiTable"を指定して、そのtbodyの子要素であるtrをグルグル走査します。
それで、走査したうち、input の class="komoku"を設定したものと、
class="tag"を設定したものの値を空にしています。
抜粋ですが、テーブルのところはこんな感じで、tdの中にテキストボックスを入れています。
classにtagとか、komokuを設定していますね。
<tbody> <tr> <td class="tdclass"><input type="text" class="form-control intable komoku" placeholder="目次の項目を入れてください"></td> <td class="tdclass"><input type="text" class="form-control intable tag" placeholder="タグに設定する名前を入れてください"></td> </tr>
参考)
http://stackoverflow.com/questions/9236332/jquery-how-to-empty-input-field
![Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative) Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)](http://ecx.images-amazon.com/images/I/51OOIybN0vL._SL160_.jpg)
Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)
- 作者: 高津戸壮
- 出版社/メーカー: 技術評論社
- 発売日: 2011/12/07
- メディア: 大型本
- 購入: 4人 クリック: 62回
- この商品を含むブログを見る