BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] iPhoneのようにHTMLテキスト入力ボックスの中にクリアボタンを設置するには？

2022-05-10 06:43:21

質問

クリックすると、<INPUT>ボックスのテキストがクリアされる、素敵な小さなアイコンを持ちたいのですが、可能でしょうか？

これは、入力ボックスの外側にクリアリンクを持つよりも、スペースを節約するためです。

CSSのスキルが弱いので...。 以下は のスクリーンショットです。 の写真で、iPhoneがどのように見えるかを示しています。

どのように解決するのですか？

HTML5 からは <input type="search"> . しかし、これは必ずしもカスタマイズできるわけではありません。UIを完全に制御したい場合のために、2つのキックオフの例を紹介します。ひとつはjQueryを使ったもの、もうひとつは使わないものです。

jQueryを使用した場合。 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon"></span>').after($('<span>x</span>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
                display: inline-flex;
                align-items: center;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                right: 3px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                color: #fff;
                background-color: #ccc;
                font: 13px monospace;
                text-align: center;
                line-height: 1em;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 18px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

jQueryを使用しない場合

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;
                display: inline-flex;
                align-items: center;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                right: 3px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                color: #fff;
                background-color: #ccc;
                font: 13px monospace;
                text-align: center;
                line-height: 1em;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 18px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousElementSibling; input.value = ''; input.focus();">x</span>
        </span>
    </body>
</html>

より醜いHTML（とクロスブラウザに対応していないJS ;）が出来上がるだけです。）

繰り返しますが、UI のルック＆フィールが最大の関心事ではなく、機能性が最大の関心事であるならば、単に <input type="search"> の代わりに <input type="text"> . HTML5対応ブラウザでは、（ブラウザ固有の）クリアボタンが表示されます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します