ラボ > CSSHTML:form関連

inputタグのテキストフィールド内のクリア

formでinputタグのテキストフィールド内のクリアさせる。

作成日:2018-01-12, 更新日:2018-02-15

基本

基本、下記のどちらかだと思う。

・resetボタンを使う
・jqueryで中身をクリアさせる

「resetボタン」は値をクリアさせるわけじゃないので、注意が必要。

jqueryを使わない方法として「type=text」じゃなく「type=search」を使う方法もある。

type=search

「type=search」にするとinputタグのテキストフィールド内に「×」マークが表示され、クリアさせることが可能。
ただ・・・ブラウザによって対応していない。

サンプル:formのinputのテキストフィールドのクリアボタン

Chrome系に対応させる場合は、下記をCSSに追加

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

サンプル

formのinputのテキストフィールドのクリアボタン