web-dev-qa-db-ja.com

HTML <label>コマンドがIphoneブラウザーで機能しない

私が作成しているhtmlページで、htmlとcssを使用してdivをクリック可能にしようとしました。これは、私がテストした一部の主要ブラウザー（Chrome、Firefox、Opera、Safari）とHTC電話で完全に動作しましたが、Iphoneでテストしようとしたところ、動作しないことに気付きました。チェックボックス自体も選択できませんでした。

これは私の（iPhone以外で動作する）コードです：

HTML：

<div class="" style="height: 30px;">
        <div style="display: table; width: 100%;">
        <div style="display: table-row; width: 100%;">
        <div style="display: table-cell;">
        <label for="3171">Text....</label>
        </div>

        <div style="display: table-cell; text-align: right;">
        <input type="checkbox" id="3171" name="3171">
        </div>
        </div>
        </div>
        <label for="3171">
        <span class="blocklink">Invisible text</span>
        </label>
        </div>

CSS：

.blocklink {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -999em;
    top: 0;
    width: 100%;
}

ご覧のとおり、私が使用しているテクニックは基本的に<label>親全体に散らばるdivなので、どこをクリックしても、リンクされたチェックボックスがオン/オフになります。

残念ながら、これはiPhoneでは機能しません。どういうわけか、この手法を使い続けるだけでなく、iPhoneサポートも提供することは可能でしょうか？ （私はHTMLとCSSのみを使用するので本当に邪魔にならないので、できればJavaScriptなしで）

前もって感謝します、

アルネ

iphonehtmlcss
35
arnehehe

空のonclick=""をラベルに追加すると、IOS4で要素が再びクリック可能になります。デフォルトでは、このアクションはプレスアンドホールドのコピーアンドペーストのテキストメカニズムによってブロックまたは追い越されているようです。

<label for="elementid" onclick="">Label</label>
61
Dan Manion

ラベル内にHTML要素が含まれている場合、問題はiOS9でも解決しないようです。少なくともその内部のスパン要素で発生します。 'pointer-events：none'はそれを修正します。

<label for="target">
  <span>Some text</span>
</label>

上記のコードは、次のcssを追加しない限り、ユーザーが「Some Text」をタップしたときにターゲット入力の変更をトリガーしません。

label span {
  pointer-events: none;
}
17
Adam Widmański

親要素に空のonclick = ""を配置することで解決しました。

<form onclick="">
    <input type="radio" name="option1" value="1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option2" value="2">
    <label for="option2">Option 2</label>

    <input type="radio" name="option3" value="3" checked="checked">
    <label for="option3">Option 3</label>
</form>
11
Hilde

何らかの理由で、適用する場合はCSSを使用します。

label { cursor: pointer; }

iPhoneとiPadの両方で機能します。

6
Jose Camporro

ちょっと変わった状況に遭遇した。 spansのすべてのlabelsでpointer-events: noneをすでに使用していました。ただし、これらのラベルの1つ内にクリック可能な<a>を追加する必要がありました。

<label>
    <span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span>
</label>

そのため、これらのpointer-events: allに<a>を明示的に設定します。

label > span { pointer-events: none; }
label > span > a { pointer-events: all; }

これは最新のChrome、Firefox、IE 11、およびiOS 9 Safariで動作しています。

1
matthewpavkov

別の解決策-ハックは多いが、防弾対策-は、ラベルの上にチェックボックスを完全に配置し、Zインデックスを作成し、幅/高さを増やして、下にあるラベルを囲み、不透明度を0にすることです。もちろん、ページに複数のラベルがある場合、これは退屈な作業になります...もちろん、そのメディアサイズの絶対位置のみを実装することもできます。アプリ環境全体をハックする必要はありません。

1
pjldesign

イベントハンドラー（onMouseEnterの例）でDOMを変更すると、onClickを含む次のすべてのハンドラーがスキップされます。

SetTimeoutはこれを修正しません。

例：1. onMouseEnterで、関数に注入されたsetTimeoutを使用して、DOMに新しいdivを挿入します。2.どのonClickハンドラーも呼び出されません。

解決策：イベントハンドラーでDOMを変更しないようにします。

備考：ラベルタグで問題が見つかりましたが、ラベル内のスパンでも引き続き発生します。この問題は、すべてのタイプタグに存在する可能性があります。

この動作は、モバイルiOSでのみ検出されます。デスクトップSafariとMac OS Safariでは、すべて問題ありません。

0
Enyby

Fastclickライブラリの使用に問題を絞り込みました。コードベースから削除すると、問題がなくなりました。これは、他の回答で提案されているネイティブのiOS/FFの問題がないことを示しています。

他の人が使用しているライブラリを知らなくても、Fastclickが非常に一般的であることを知っているなら、このバグの根本的な原因は、実際にはライブラリの問題であると提案できます-Appleリリース！おそらくそれは可能性が高いようです。

詳細

一部のブラウザでは、セキュリティ対策としてファイル入力がクライアントコードによってトリガーされるのを防ぎます。 document.querySelector('input[type=file]').click()を使用してコンソールからクリックイベントをトリガーしてみてください。それが機能し、コードから同じことを行うと、不思議なことに失敗します。

このバグが存在する理由は、Fastclickによってontouchstartハンドラーが<label />に適用されているためと考えられます。タッチデバイスでトリガーされると、ライブラリはそのイベントをonclickハンドラー、またはこの場合はネイティブの<label />機能にプロキシします。残念ながら、これはクライアントコードがファイル入力の開始をトリガーしており、ブラウザーによってブロックされていることを意味します。

0
Simon Robb