Android Chrome の タップして検索 (Touch to Search) の対象から外す

はじめに

• Android Chrome には 「タップして検索」という機能が存在する
• 特定の要素をタップや、長押しをしたときに「タップして検索」の対象から除外したい

回避方法

• 要素に tabindex=-1 を付与する
• 要素がインタラクティブであることを示す
  • role=button や JavaScript を使用して DOM を操作する
• 要素に user-select: none を付与する

その中の「要素に user-select: none を付与する」について記載する

要素に user-select: none を付与する

Tailwind CSS を使用している場合

Class に select-none を追加すれば良い。

<span class"select-none">foo</span>

CSS の場合

user-select: none; を指定してあげれば良い。

.foo {
  user-select: none;
}

<span class="foo">bar</span>

Ref