[解決済み] bootstrap 3 で検索ボックスの 'x' を消すにはどうしたらいいですか?
2023-01-05 02:32:22
質問
bootstrapに問題があるので、何か手助けがあると助かります。ありがとうございます。
私が欲しいもの:(トップ部分)
私の現在のコードです。
<div class="form-group">
<input type="text"
class="form-control"
id="findJobTitle"
name="findJobTitle"
placeholder="Job Title, Keywords"
onkeyup="showResult()">
</div>
現在のスクリーンショットです。
どのように解決するのですか?
このようなものを得るには
をBootstrap 3とJqueryで表示するには、次のようなHTMLコードを使用します。
<div class="btn-group">
<input id="searchinput" type="search" class="form-control">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>
といくつかのCSSがあります。
#searchinput {
width: 200px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
とJavascriptで記述します。
$("#searchclear").click(function(){
$("#searchinput").val('');
});
もちろん、入力が空の場合は 'x' を隠したり、Ajax リクエストを行うなど、必要な機能のためにさらに Javascript を記述する必要があります。参照 http://www.bootply.com/121508
関連
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み】Font-awesome、入力タイプ'submit'
-
[解決済み] Bootstrap3での入力幅について
-
[解決済み] Bootstrapがline-heightプロパティを1.428571429に設定する理由は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] SCSSファイルエラー。インポートするファイルが見つからないか読めません: bootstrap
-
[解決済み] angular 2でbootstrap 4を使用するには?
-
[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み】これらの属性は何ですか。アリア・ラベリングビー`とアリア・ヒドゥン`です。
-
[解決済み] BootstrapはCDNから使うべきか、それとも自分のサーバーにコピーを作るべきか?
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] Bootstrapでテーブルの上にカーソルを置くと、カーソルの色を変更するにはどうすればよいですか?
-
[解決済み] Bootstrapでテーブルの行をソートする [終了しました]。
-
[解決済み] Twitter Bootstrapの名前空間を利用してスタイルが衝突しないようにする方法