[解決済み】入力テキスト内のアイコンを消去する
2022-04-11 08:35:58
質問
入力テキスト要素に、右側にアイコンをつけて入力要素自体をクリアする(googleの検索ボックスのような)簡単な方法はありませんか?
いろいろ探したのですが、アイコンをinput要素の背景にする方法しか見つかりませんでした。jQueryのプラグインとかあるんでしょうか?
入力テキスト要素の中にアイコンを表示させたいのですが、どのような方法がありますか?
--------------------------------------------------
| X|
--------------------------------------------------
解決方法は?
を追加します。
type="search"
を入力に追加します。
サポートはかなり充実していますが、果たして
IE<10で動作しない
<input type="search">
旧ブラウザ
必要な場合 IE9対応 以下はその回避策です。
標準の
<input type="text">
といくつかのHTML要素で構成されています。
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
のみを使用しています。
<input class="clearable" type="text">
(追加要素なし)
を設定します。
class="clearable"
で、その背景画像で遊ぶ。
/**
* Clearable text inputs
*/
function tog(v){return v ? "addClass" : "removeClass";}
$(document).on("input", ".clearable", function(){
$(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function( ev ){
ev.preventDefault();
$(this).removeClass("x onX").val("").change();
});
// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/*
Clearable text inputs
*/
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
コツは、右側のパディング(私は18pxを使いました)を
input
を使い、背景画像を右側に押し出し、見えないようにする(私は
right -10px center
).
この18pxのパディングは、テキストがアイコンの下に隠れるのを防ぎます(表示されている間)。
jQueryはクラス
"x"
(もし
input
が値を持つ場合、クリアアイコンが表示されます。
あとは、jQのターゲットとなる入力にクラス
x
を検出し
mousemove
マウスがその 18px "x" 領域の内側にある場合、クラスを追加します。
onX
.
をクリックすると
onX
クラスはすべてのクラスを削除し、入力値をリセットし、アイコンを非表示にします。
7x7pxのGIFです。
Base64の文字列です。
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
関連
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み】HTML5入力の「検索」のクリアを検出する方法は?