3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[Ionic]コピペ(範囲選択)するためにuser-selectの設定をする

Last updated at Posted at 2018-02-27

Ionicで作ったプロジェクトはデフォルトだとコピペのための範囲選択ができません。アプリ向けならこのままで良いけど、PWA対応のサイトを作るなら範囲選択できたほうが良いかな?と思います。

一様、範囲選択とは下の画像の色変わってるとこみたいなやつ
Screen Shot 2018-02-28 at 0.57.08.png

そこでsrc/app/app.scssに以下のコードを追加すると範囲選択できるようになります。

src/app/app.scss

// 下が追加したコード
html, body, ion-app,ion-content,.nav-decor {
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -ms-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
}

Githubのソース
DEMO

デモのサイトは上記の設定があるので範囲選択できるようになっています。以上です。
※過去にDEMOのサイトに訪れたことのある人はcacheの影響でまだ範囲選択できないかも

短いけど、久しぶりに設定しようとしたら忘れてたので・・・。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?