type=”text”)に入力したテキストをクリアさせるのは、ユーザーにとって手間ですよね。クックパッドなどでは親切に「×」ボタンを用意してクリアできるようになっています。くくるそれが「テキストフォームと削除用のGlyphiconボタン要素をbtn-grpupでまとめる」というもの。glyphicon-remove-circle"></span></div>次に以下のCSSを適用します。#ccc;}こうすると以下のようなUIになります。このレイアウトの素晴らしいところは、テキストフィールドを「input-sm」にしたり「size」属性などで幅を短くしてもちゃんと配置されるところです。次にこの「×」ボタンが押された際の挙動を記述します。これは最初にstackoverflowで書かれていたサンプルコードをさらに汎用的に、複数の箇所で使えるようにアレンジしたものです。テキストフィールドを指定し、クリアしています。動作しているところを見てみましょう。これで使い勝手の良いテキストフォームになりましたね。コメントをキャンセルメールアドレスが公開されることはありません。Webサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。田舎に生まれ育ち東京へ。技術はDTPデザインからプログラミングまで、インフラはCD-ROM全盛からクラウドサーバーまで、いろいろなビジネスを作り、関わってきました(知見を生かして専門学校の講師も3年ほど)。今ではAWSで月間100万PVを超えるサービスを制作・運営しながらさらなるノウハウを蓄積中。このサイトではビジネスをITコンサルタント視点で考え、感じた知見や経験が世の中のお役に立てば、という視点で無料記事として公開しています。最近は機械学習による仕事の効率化を研究中。reserved.代表者のライフハックブログ。