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

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

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

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

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

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

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

 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（コントロール）;
  }
}

このコードでは、最初に

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

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

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

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

 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の「新しいツイート」ページでタブが開き、選択したテキストが準(zhǔn)備が整っています。

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

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

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

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

デモ

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

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

そのについて

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

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

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

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

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

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