iPhoneのように、HTMLテキスト入力ボックス内にクリアボタンを配置するにはどうすればよいですか？

131

クリックすると<INPUT>ボックスのテキストがクリアされる、素敵な小さなアイコンが欲しいのですが。

これは、入力ボックスの外側に明確なリンクを設けるのではなく、スペースを節約するためです。

CSSのスキルが弱い... これがiPhoneの外観のスクリーンショット写真です。

javascript  iphone  html  css 
— ヒュー・ブキャナン
ソース

回答:

93

@thebluefoxは何よりも要約しています。とにかく、そのボタンを機能させるためにJavaScriptを使用することも強制されます。これがSSCCEです。コピーして貼り付けて実行できます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

ここでライブ例。

jQueryは必ずしも必要ではありません。プログレッシブ拡張に必要なロジックをソースから適切に分離します。もちろん、プレーン HTML / CSS / JSを使用することもできます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

最終的には醜いHTML（そして非ブラウザ互換のJS;）だけになります。

UIのルックアンドフィールが最大の問題ではないが、機能が重要な場合は、の<input type="search">代わりに使用することに注意してください<input type="text">。HTML5対応ブラウザで（ブラウザ固有の）クリアボタンが表示されます。

— BalusC
ソース
7
テキストフィールドが空のときにクリアボタンを非表示にすることは可能ですか？
— ルート
IE9では、テキストは十字アイコンの下に表示されます。
— セドバフ2014年
テーマが変更されたため、画像のURLは正しくなくなりました。古いイメージには、web.archive.org
— web / 20150101025546 / http：//cdn.sstatic.net/…
1
またclass="fa fa-remove"、内側のスパンでfont-awesomeアイコンを使用して、素敵なクロスアイコンを表示することもできます
— singe3
純粋なJavascriptバージョンを使用しましたが、Win / Linux Firefox / Chromeのボタンを中央に配置することを除いて、それはうまく機能しました。私top:は子スパンを削除display: flex; align-items: center;して親スパンを設定することでそれを解決しました。
— thomasa88
157

最近のHTML5では、それは非常に簡単です。

<input type="search" placeholder="Search..."/>

最新のブラウザのほとんどは、デフォルトでフィールドに使用可能なクリアボタンを自動的にレンダリングします。

プレーンHTML5検索入力フィールド

（Bootstrapを使用する場合は、CSSファイルにオーバーライドを追加して表示する必要があります）

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

ブートストラップ検索入力フィールド

使用しているときのSafari / WebKitのブラウザでも、余分な機能を提供することができますtype="search"ように、results=5そしてautosave="..."、彼らはまた、（例えば、高さ、国境）あなたのスタイルの多くをオーバーライドします。これらのオーバーライドを防ぐために、Xボタンのような機能を維持しながら、これをCSSに追加できます。

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

が提供する機能の詳細については、css-tricks.comを参照してくださいtype="search"。

— ニックスウィーティング
ソース
3
素晴らしい答え、コードは含まれていません。残念ながら、多くのブラウザではサポートされていません..気にしないでください、私の製品のChromeの追加機能になるでしょう:)
— guillaumepotier 2017
48

HTML5では、「検索」入力タイプが導入されています。

<input type="search" />

これがライブの例です。

— ThorSummoner
ソース
4
「検索」タイプは最近のすべてのブラウザーでサポートされていますが（サポートはここで確認してください：wufoo.com/html5）、クリアボタンはFirefox（32.0.3）またはOpera（12.17）では表示されません。
— justanotherprogrammer 2014
9
クリアボタンも最新のChromeでは表示されません
— tsayen
3
— aexl
リンクされたCodePenの入力に終了スラッシュがないため、CodePenで機能することを確認するには、終了スラッシュを追加します。
— Gen1-1
@ Gen1-1おっと、パブリックアップロードが無効になっている ようですblog.codepen.io/2019/08/06/anonymous-pen-save-option-removed固定コードペンをお持ちの場合は、遠慮なく編集して修正してくださいデモ
— ThorSummoner
24

jQuery-ClearSearchプラグインをチェックしてください。これは構成可能なjQueryプラグインです。入力フィールドをスタイリングすることでニーズに合わせて簡単に調整できます。次のように使用してください：

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

例：http : //jsfiddle.net/wldaunfr/FERw3/

— wldaunfr
ソース
これは素晴らしいですが、「$（window）.resize（function（）{triggerBtn（）}）;」を追加することをお勧めします。$ this.on（ 'keyup keydown change focus'、triggerBtn）;の直後のjquery.clearsearch.js | サイズ変更ウィンドウがクロス位置を台無しにしないように
— Ng Sek Long
17

残念ながら実際にはテキストボックス内に配置することはできません。テキストボックス内に表示するだけです。これは、残念ながら一部のcssが必要であることを意味します：P

理論は、入力をdivでラップし、すべての境界線と背景を入力から取り除き、divをボックスのようにスタイル設定します。次に、コードの入力ボックスの後にボタンをドロップし、ジョブを実行します。

とにかくそれがうまくいったら;）

— トム
ソース
6

私はあなたが探していると思う創造的な解決策を得ました 

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>
スニペットを展開

https://jsfiddle.net/qdesign/xn9eogmx/1/

— マフムード・アリ・カッセム
ソース
3

もちろん、最善のアプローチは、ますますサポートされている <input type="search" />です。

とにかくコーディングの楽しみのために、フォームのリセットボタンを使用しても達成できると思いました。これは実際の結果です（他の入力を実行できないが、このアプローチの検索フィールドを使用しないと、リセットボタンは消去されます）それらも）、javascriptは必要ありません：

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>
スニペットを展開

— TechNyquist
ソース
1

たぶん、この簡単な解決策が役立つかもしれません：

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
スニペットを展開

— メヘランシャゲルディ
ソース
このコードはOPの問題の解決策を提供する場合がありますが、このコードが質問に回答する理由や方法に関する追加のコンテキストを提供することを強くお勧めします。同様の問題を経験している将来の視聴者はソリューションの背後にある理由を理解できないため、コードのみの回答は通常、長期的には役に立たなくなります。
— E. Zeytinci
-1

@Mahmoud Ali Kaseem

CSSを変更して見た目を変え、focus（）を追加しました。

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>
スニペットを展開

— ハイレン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.