フォーム入力項目はラベルを使用し、Bootstrap ライブラリを参照するため、入力クリック効果領域が増加します。

PHP中文网
リリース: 2017-06-07 13:26:01
オリジナル
1765 人が閲覧しました
产品姐姐想法多,点击input项才能聚焦进行操作,点击外部不能有反应
ログイン後にコピー

ラベルをよりセマンティックにするために、フォームアイテムをラップするラベルをよく使用します

<label for="label-input"><input type="text" class="" id="label-input"><br><button>buttonbutton>label>
ログイン後にコピー

モバイルプラットフォームページの開発では、フォームアイテムのクリック可能な領域を大きくするために、操作性が向上すると、ラベルはそれに応じた利便性を提供できます。

ただし、ラベルが必要なだけの場合もありますが、理由もなくクリック可能な領域が増加することは望ましくありません。 Bootstrap の導入により、クリック可能な領域が自動的に増加します

上の図に示すように、入力項目をクリックするだけで効果が期待できますが、ラベル label 内の他の空白領域をクリックするとトリガーされます。 (ボタンをクリックしてもトリガーされないことに注意してください)

は Bootstrap のスタイル ライブラリ

<link rel="stylesheet" type="text/css" href="bootstrap.min.css?1.2.45">
ログイン後にコピー

を導入したばかりです。これを解決するには、 イベント によってトリガーされる オブジェクト を特定してみてください。しかし、それは無効であり、常にINPUTラベルであり、非科学的です

$(&#39;#label-input&#39;).click(function(e) {var elem = e.target;
    console.log(elem.tagName);if (elem.tagName !== &#39;INPUT&#39;) {return false;
    }
})
ログイン後にコピー

どうすればよいですか

私は方法を考え、ラベルをクリックするモニターを設定しました、そして直接 false を返します、OK~

$(&#39;label&#39;).click(function() {return false;
});

$(&#39;#label-input&#39;).click(function(e) {var elem = e.target;
    console.log(elem.tagName);
})
ログイン後にコピー


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート