inputのクリアボタン

2024年7月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はinputに入力した内容を全部消してくれる✕ボタン（クリアボタンっていうんでしょうか）を実装してみようと思います。

input type="search"を使う

参考：たけらぼ｜inputフォーム内のクリアボタンについて

<input type="search" placeholder="文字を入力してください">

input type="search"というのを使えば✕ボタンが出るらしいのですが、bootstrap.cssでは以下のように無効化されていました。

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

これを書き換えてみます。

input[type="search"] {
  -webkit-appearance: searchfield;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  cursor: pointer;
  background-image: url("img/batsu.svg");
  height: 16px;
  width: 16px; 
}

文字を入力したら✕ボタン（の画像）が出たでしょうか。

この✕ボタンは「サーチキャンセルボタン」「サーチフィールドキャンセルボタン」っていうみたいですね長いからクリアボタンでええわい

クリアボタンを自作する

参考：colori｜Bootstrap3でtextフィールド内にclearボタンを設置する技

クリアボタンをinputの上に重ねてみます。

Font Awesomeのtimes-circleを使ってみました。

<div class="p-relative">
  <input type="text" placeholder="文字を入力してください">
  <button type="button" class="searchclear"><i class="fas fa-times-circle"></i></button>
</div>

CSSは以下の通りです。

.p-relative {
  position: relative;
}

.searchclear {
  position: absolute;
  top: 0;
  right:0;
  bottom: 0;
  width: 48px;
  height: 48px;
  margin: auto;
  font-size: 16px;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}

.searchclear i {
  color:#aaa;
}

スクリプトを記述します。

クリアボタンを押してもフォーカスが外れないように1行書き足しました。

$(function () {
  $('.searchclear').click(function () {
    $(this).parent().find('input').val('');
    $(this).parent().find('input').focus();
  });
});

お好みでとかにしてみてもいいかもです。

せっかくなので疑似要素で✕を作ってみました。

<div class="p-relative">
  <input type="text" placeholder="文字を入力してください">
  <button type="button" class="searchclear"></button>
</div>

.searchclear::before, .searchclear::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 2px;
  height: 24px;
  background: #aaa;
}

.searchclear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.searchclear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

文字を入力したら✕が出現

inputが空の状態だとクリアボタンが隠れていて、何か入力されたら表示されるようにしてみようと思います。

参考：iPentec｜テキストボックスに文字が入力されている場合にだけ、テキストボックスの中にクリアボタンを設置する

inputに#search、クリアボタンに#clear_buttonというIDを振っておきます。

<div class="p-relative">
  <input type="text" id="search" placeholder="文字を入力してください">
  <button type="button" id="clear_button" class="searchclear"></button>
</div>

クリアボタンにdisplay:noneとopacity:0を追加して見えなくしておきます。

.searchclear {
  display: none;
  opacity: 0;
}

以下のスクリプトを記述します。

$(document).ready(function () {
  $("#search").on("keyup", function () {
    var inputValue = $(this).val().trim();
    $("#clear_button").toggle(!!inputValue);
    if (inputValue) {
      $("#clear_button").stop().fadeIn(300).animate({opacity: 1}, 300);
    } else {
      $("#clear_button").stop().fadeOut(300).animate({opacity: 0}, 300);
    }
  });
  $("#clear_button").click(function () {
    $("#search").val("");
    $("#search").focus();
    $(this).stop().fadeOut(300).animate({opacity: 0}, 300);
  });
});

on("input")だと挙動がおかしかったのでon("keyup")にしてみましたが合ってるかどうかはわかりません＞＜

まとめ

パソコンでは問題ないのですが、iPhoneでは入力して確定する前に✕を押すと、その後フォーカスを外すまで入力ができなくなるという謎の現象が起きます。なんでかなあ。

問い合わせフォームのinputでは氏名や住所を何度も書き直したりはあまりしなさそうなのでクリアボタンはなくてよさそうですが、検索窓は検索ワードをいろいろ変えてみたりする性質上、クリアボタンはあった方がよさそうです。