ユーザークリック時にテキストを自動強調表示する方法

URLアドレス、自動生成されたAPIキー、または数行のコード（スニペット）など、Webサイト上のコンテンツの一部はユーザーによってコピーされることを意図しています。しかし、これらのコンテンツをコピーすることは、特にトラックパッドや不器用なマウスを使っているユーザーにとっては難しいかもしれません。それでは、それらをより簡単にしましょう.

TheNextWebのようなWebサイトに出くわした場合は、クリックするとショートリンクURLが強調表示されます。これがどのように行われているかチェックしてみましょう.

入門

はじめに、ショートリンクURLをラップするHTMLをレイアウトします。.

  ショートリンク   http://goo.gl/9JEpOz

URLをにラップしています。 スパン Ioniconからのアイコンと一緒に要素。それはあなたのウェブサイトのレイアウトに依存するので、これらの要素のスタイルは完全にあなた次第です。しかし、このデモの目的のために、私はこのようにスタイルを整えます。

それはシンプルで、青と正方形です（ここでスタイルコードをつかみます）.

JavaScript

そしてここがコードの本質、JavaScriptです。ここでの計画は ユーザーがクリックしたURLをハイライトします.

ユーザーがクリックする要素を選択する変数でコードを始めます。.

 var target = document.querySelector（ '。shortlink'）;

の querySelector 要素を選択するためのJavaScriptメソッドです。それは基本的にjQueryのコンストラクタのように動作します $（）. ドット表記法を使用して、クラスごとに要素を取得することもできます。 ＃ IDで要素を取得するための表記.

次に、新しいJavaScript関数を作成する必要があります。.

 機能選択（elem）

私達は私達の機能をと名付けます 選択（）. そしてあなたが上で見ることができるように、関数はURLまたは私達が強調したい通常のテキストをラップする要素を渡すためにパラメータを必要とします。私たちの場合、これは スパン の要素 shortlink__url クラス.

この関数内に、さらに2つの変数を追加します。

 var target = document.querySelector（ '。shortlink'）;関数選択（elem）var elem = document.querySelector（elem）; var select = window.getSelection（）; var range = document.createRange（）;

まず、 エレム variableは、関数のパラメータを通過する要素を選択します。 2番目の変数, 選択する, テキストの選択を取得するためにネイティブのJavaScript関数を実行します。最後の変数, 範囲 選択範囲を制御します。選択が選択された要素内にのみあることを確認したい.

次に、これらの変数を次のような他の2つのJavaScript関数と結び付けます。

 var target = document.querySelector（ '。shortlink'）;関数選択（elem）var elem = document.querySelector（elem）; var select = window.getSelection（）; var range = document.createRange（）; range.selectNodeContents（elem）; select.addRange（範囲）;

最初の追加, range.selectNodeContents（elem）, を定義します 選択範囲 これは、この場合に参照される要素です。 エレム. 最後の行, select.addRange（範囲） 選択範囲を指定された範囲に限定します。.

すばらしいです！私達はすべて機能と設定されています。それを実行に移そう.

それを実行します

ターゲット要素を オンクリック イベント要素がクリックされると、今作成した関数を実行し、URLがラップされている要素のクラス名を使用してパラメータを渡します。この場合それはあります .shortlink__url.

 target.onclick = function（）selection（ '。shortlink__url'）; ;

これで終わりです。前述したように、Webサイト上の他の種類のコンテンツに対しても、ユーザーがより簡単にコピーできるようにすることができます。.

私たちが自動的にできるかどうか疑問に思う人もいるでしょう。 コピーする, 単にハイライトするのではなく、ユーザーがクリックしたときの短縮です。これは本当に良い考えのように思えるかもしれませんが、残念ながらそれを達成するのはそれほど簡単ではなく、悪いユーザー経験を引き起こすかもしれません。コピー操作は完全にユーザーの同意のもとに行う必要があります。.

この記事の手順では、ハイライト・アクションまでしか取り上げません。私たちのユーザーがそれをコピーするかどうかは、完全に彼ら次第です。.

次のリンクをたどってデモを見たり、ソースコードをダウンロードしたりできます。.

デモを見る
ソースをダウンロード