選択APIを使用して選択したテキストのアクションを作成する方法

クリック、ドラッグ、リリース：Webページでテキストを選択したばかりです。おそらくどこかにコピーして貼り付けたり、共有したりします。そのテキストを選択して、それらのタスクを簡単にするいくつかのオプションが明らかになった場合、それはクールではないでしょうか？それが選択メニューが行うことです。

オンラインエディターを使用したことがある場合は、すでに選択メニューに精通している可能性があります。テキストを選択すると、選択をフォーマットするオプションがその上に浮かぶ場合があります。実際、私はこのドラフトを編集者に書いています。

JavaScriptの選択APIを使用して、このような選択メニューを作成する方法を見てみましょう。 APIは、Webページ上の選択された領域のスペースとコンテンツにアクセスできます。これにより、選択メニューを選択したテキストの上に正確に配置し、選択したテキスト自体にアクセスできます。

サンプルテキストを備えたHTMLスニペットは次のとおりです。

 
  <h1>以下のテキストを選択します</h1> 
  <p>カスケードスタイルシート（CSS）は、HTMLなどのマークアップ言語で記述されたドキュメントのプレゼンテーションを説明するために使用されるスタイルシート言語です。 CSSは、HTMLとJavaScriptと並んで、World Wide Webの礎石テクノロジーです。 CSSは、レイアウト、色、フォントなど、プレゼンテーションとコンテンツの分離を可能にするように設計されています。この分離は、コンテンツのアクセシビリティを改善し、プレゼンテーション特性の仕様においてより柔軟性と制御を提供することができます。 </p>

 <span> </span> 

最後に

これがスタイリングするCSSです：

 ＃コントロール {
    バックグラウンドイメージ：url（ "data：image/svg xml、<svg xmlns=" http://www.w3.org/2000/svg " width="'40px'" height="'40px'"> xmlns = 'http：//www.w3.org/1999/xhtml' style = 'width：40px; height; height：40px; line-height：40px; text-align：center; color：transparent; text-shadow：0 0 yellow、2px 4px黒、-1px -1px black; font-size：35px; '>？  </svg> "）;
  カーソル：ポインター;
  位置：絶対;
  幅：40px;
  高さ：40px;
}
#control :: before {
  背景色：黒;
  色：白;
  コンテンツ：「Tweet This！」;
  表示：ブロック;
  font-weight：bold;
  マージン左：37px;
  マージントップ：6px;
  パディング：2px;
  幅：最大含有;
  高さ：20px;
}

この記事をチェックして、背景画像に絵文字（？）をどのように使用したかを学びます。

これまでのところ、サンプルテキストの準備が整っており、選択メニューコントロールがスタイルを整えています。 JavaScriptに進みましょう。選択が行われたら、ページ上の選択した領域のサイズと位置を取得します。次に、これらの測定値を使用して、選択した領域の上部にある選択メニューコントロールの位置を割り当てます。

 var control = document.importnode（document.queryselector（ 'template'）。コンテンツ、true）.childnodes [0];
document.queryselector（ 'p'）。onpointerup =（）=> {
  let selection = document.getSelection（）、text = selection.toString（）;
  if（text！== ""）{
    rect = selection.getRangeat（0）.getBoundingClientRect（）;
    control.style.top = `calc（$ {rect.top} px -48px）`;
    control.style.left = `calc（$ {rect.left} px calc（$ {rect.width} px / 2）-40px）`;
    ['text'] = text; 
    document.body.AppendChild（コントロール）;
  }
}

このコードでは、最初に

次に、サンプルテキストを運ぶ要素のonpointerupイベントのハンドラー関数を書きます。関数内で、document.getSelection（）を使用して選択された文字列と選択した文字列を取得します。選択した文字列が空でない場合は、GetBoundingClientRect（）を介して選択された領域のサイズと位置を取得し、rect変数に配置します。

rectを使用して、コントロールの上部と左の位置を計算して割り当てます。このようにして、選択メニューコントロールは、選択した領域の少し上に配置され、水平に中央に配置されます。また、選択した文字列をユーザー定義のコントロールプロパティに割り当てます。これは後でテキストを共有するために使用されます。

そして最後に、appendChild（）を使用してWebページにコントロールを追加します。この時点で、ページ上のサンプルテキストの一部を選択すると、選択メニューコントロールが画面に表示されます。

次に、選択メニューコントロールがクリックされたときに何が起こるかをコーディングします。言い換えれば、プロンプトがクリックされたときにテキストがツイートされるようにすることになります。

 control.addeventlistener（ 'pointerdown'、oncontroldown、true）;

function oncontroldown（event）{
  window.open（ `https://twitter.com/intent/tweet?text=$ {this.text}`）
  this.remove（）;
  document.getSelection（）。removeallranges（）;
  event.stoppropagation（）;
}

コントロールがクリックされると、Twitterの「新しいツイート」ページでタブが開き、選択したテキストが準備が整っています。

ツイートプロンプトの後、選択メニューコントロールは不要になり、削除され、ページに作成された選択があります。この時点で、ポインターダウンイベントがDOMツリーのさらに下にカスケードする方法も停止します。

また、ページのOnpointerdownイベントのためのイベントハンドラーも必要です。

 document.onpointerdown =（）=> {    
  let control = document.querySelector（ '＃control'）;
  if（control！== null）{control.remove（）; document.getSelection（）。removeallranges（）;}
}

これで、ページ上の[選択]メニューコントロール以外の場所をクリックすると、ページに作成された選択が削除されます。

デモ

これが、クリスがまとめたより軽いバージョンです：

そして、選択メニューに複数のコントロールを示す例があります。

そのについて

私たちがそれを使用することは完全に必要ではありません。代わりに、非表示のHTML属性やCSSディスプレイなど、他の方法でコントロールを単純に隠して表示することもできます。また、JavaScript自体に選択メニューコントロールを構築することもできます。コーディングの選択肢は、必要に応じてそれらをどれだけ効率的に実行するか、およびそれらのフォールバックと、それらがアプリケーションにどのように適合するかに依存します。

いくつかのUI/UXアドバイス

これは良い効果ですが、適切なユーザーエクスペリエンスを確保するために使用する際に考慮すべきことがいくつかあります。たとえば、テキストの選択に独自のテキストを注入しないでください。自動生成されたツイートでリンクをサイトに戻すようなものです。それは邪魔で迷惑です。ソースの引用を追加するなど、それを行う理由がある場合は、投稿する前にユーザーに最終テキストのプレビューを見てもらいます。それ以外の場合、ユーザーは追加に混乱したり驚かされたりする可能性があります。

もう1つ：メニューコントロールが邪魔にならない場合が最善です。周囲のコンテンツをあまりカバーしたくありません。そのようなことは、CSSの「データ損失」につながり、それを避けたいと考えています。

結論：ユーザーがWebサイトでテキストを選択し、やろうとしていることの邪魔にならないようにコントロールを追加する必要がある理由を理解してください。

以上が選択APIを使用して選択したテキストのアクションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。