14

UI がかなり複雑で、画面の一部がコンテンツ用に予約されている Web アプリがあります。

可能であれば、ユーザーがブラウザの組み込みのテキスト検索 (CTRL+F) を使用すると、UI 内のテキストは無視され、実際のコンテンツのみが検索されるようにしたいと考えています。

これは実行可能ですか？CSS と JavaScript は許容されます

（おそらくテキストをにレンダリングできることはわかっていますが、<canvas>そこに努力する価値はありません）

4

3 に答える 3

9

CSScontentプロパティを使用して UI テキストを挿入できます。このように生成されたテキストは、コンテンツではなくドキュメント スタイルの一部であるため、検索できません。

例えば：

UI にボタンがある場合<button id="dosomething"></button>、次の CSS を使用してその中に検索不可能なテキストを追加できます。

#dosomething:before {
    content: "Click Me";
}

これがどのように機能するかを示すフィドルを作成しました: http://jsfiddle.net/3xENz/<a>タグでも機能することに注意してください。

セレクターは動作しませんが:before、IE8 では動作するため、セレクターを使用することをお勧めします。:after

より複雑な UI 要素がある場合は、その中に別の要素を追加して、テキスト コンテンツを保持することもできます。例えば：

<div id="complexcontrol"><div class="text"></div></div>

次の CSS を使用します。

#complexcontrol .text:before {
    content: "Click Me";
}

スクリーン リーダーはおそらくこれらのスタイルを適切に処理しないため、画像の場合と同じアクセシビリティの問題が引き続き発生しますが、メンテナンスがはるかに簡単になり、よりレスポンシブなデザインが可能になります。

于 2013-10-18T20:02:36.467 に答える
0

私の提案は、検索可能にしたくない領域を画像にするか、フラッシュのようなものを使用することです。私が見つけることができた唯一の解決策はこれでした。しかし、それを使用するかどうかは完全にあなた次第です。

于 2013-10-18T20:01:59.447 に答える