1. ホーム
  2. ジャバスクリプト

[解決済み】入力テキスト内のアイコンを消去する

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">&times;</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=