선택 API로 선택한 텍스트에 대한 작업을 만드는 방법

클릭, 드래그, 릴리스 : 웹 페이지에서 일부 텍스트를 선택했습니다. 어딘가에 복사하여 붙여 넣거나 공유 할 수 있습니다. 해당 텍스트를 선택하면 해당 작업을 더 쉽게 할 수있는 몇 가지 옵션이 드러나면 멋지지 않습니까? 그것이 선택 메뉴가하는 일입니다.

온라인 편집자를 사용한 경우 선택 메뉴에 이미 익숙 할 수 있습니다. 텍스트를 선택하면 선택을 형식화하는 옵션이 그 위에 부유 할 수 있습니다. 사실, 나는이 초안을 편집자로 정확히 수행하는 편집자로 작성하고 있습니다.

JavaScript의 선택 API를 사용하여 이와 같은 선택 메뉴를 만드는 방법을 살펴 보겠습니다. API는 웹 페이지에서 선택한 영역의 공간과 내용에 액세스 할 수 있도록합니다. 이렇게하면 선택한 텍스트 위에 선택 메뉴를 배치하고 선택한 텍스트 자체에 액세스 할 수 있습니다.

다음은 샘플 텍스트가있는 HTML 스 니펫입니다.

 
  <h1 id="아래-텍스트를-선택하십시오"> 아래 텍스트를 선택하십시오 </h1> 
  <p> 계단식 스타일 시트 (CSS)는 HTML과 같은 마크 업 언어로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일 시트 언어입니다. CSS는 HTML 및 JavaScript와 함께 월드 와이드 웹의 초석 기술입니다. CSS는 레이아웃, 색상 및 글꼴을 포함한 프레젠테이션 및 콘텐츠를 분리 할 수 ​​있도록 설계되었습니다. 이 분리는 콘텐츠 접근성을 향상시키고 프리젠 테이션 특성의 사양에서 더 많은 유연성과 제어를 제공 할 수 있습니다. </p>

 <span> </span> 템플릿>

끝에

스타일의 CSS는 다음과 같습니다.

 #제어 {
    배경-이미지 : URL ( "data : image/svg xml, <svg xmlns="http://www.w3.org/2000/svg " width="'40px'height"> <forexobject width="'40px'height"> <div xmlns="'http" : line-height black font-size>? </div>  </forexobject></svg> ");
  커서 : 포인터;
  위치 : 절대;
  너비 : 40px;
  높이 : 40px;
}
#control :: 이전 {
  배경색 : 검은 색;
  색상 : 흰색;
  내용 : "이것을 트윗하십시오!";
  디스플레이 : 블록;
  글꼴 중량 : 대담한;
  마진 왼쪽 : 37px;
  마진-탑 : 6px;
  패딩 : 2px;
  너비 : 최대 컨텐츠;
  높이 : 20px;
}

배경 이미지에 이모티콘 (?)을 어떻게 사용했는지 알아 보려면이 기사를 확인하십시오.

지금까지 샘플 텍스트가 준비되었으며 선택 메뉴 컨트롤이 스타일이되었습니다. JavaScript로 넘어 갑시다. 선택이 이루어지면 페이지에서 선택한 영역의 크기와 위치를 얻을 수 있습니다. 그런 다음 해당 측정을 사용하여 선택한 영역의 최상단에서 선택 메뉴 컨트롤의 위치를 ​​할당합니다.

 var control = document.importNode (document.querySelector ( 'template'). 내용, true) .ChildNodes [0];
document.querySelector ( 'p'). onpointerup = () => {
  선택 = 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)`;
    Control [ 'text'] = 텍스트; 
    document.body.appendChild (컨트롤);
  }
}

이 코드에서는 먼저

다음으로, 우리는 샘플 텍스트를 전달하는 요소의 onpointerup 이벤트에 대한 핸들러 기능을 작성합니다. 함수 내부에서는 document.getSelection ()을 사용하여 선택한 문자열과 선택한 문자열을 얻습니다. 선택한 문자열이 비어 있지 않으면 GetBoundingClientRect ()를 통해 선택한 영역의 크기와 위치를 가져 와서 ERACT 변수에 배치합니다.

rect를 사용하여 컨트롤의 상단 및 왼쪽 위치를 계산하고 할당합니다. 이런 식으로 선택 메뉴 컨트롤은 선택된 영역 위에 약간 위에 놓여 수평으로 중앙에 배치됩니다. 또한 선택한 문자열을 사용자 정의 컨트롤 속성에 할당합니다. 이것은 나중에 텍스트를 공유하는 데 사용됩니다.

그리고 마지막으로, 우리는 AppendChild ()를 사용하여 웹 페이지에 컨트롤을 추가합니다. 이 시점에서 페이지에서 샘플 텍스트 중 일부를 선택하면 선택 메뉴 컨트롤이 화면에 나타납니다.

이제 선택 메뉴 컨트롤을 클릭 할 때 발생하는 일이 진행됩니다. 다시 말해, 프롬프트가 클릭되면 텍스트가 트윗되도록 만들 것입니다.

 Control.addeventListener ( 'Pointerdown', Oncontroldown, True);

oncontroldown (이벤트) 함수 {
  Window.Open (`https://twitter.com/intweet?text=$ {this.text}`)
  this.remove ();
  document.getSelection (). removealLranges ();
  event.stopPropagation ();
}

컨트롤이 클릭되면 Twitter의 "새 트윗"페이지로 탭이 열리 며 선택한 텍스트를 준비 할 수 있습니다.

트윗 프롬프트 후에는 선택 메뉴 컨트롤이 더 이상 필요하지 않으며 페이지에서 선택한 선택과 함께 제거됩니다. 이 시점에서 Pointerdown 이벤트가 Dom 트리 아래로 더 내려 가면서 캐스케이드하는 방식도 중단됩니다.

또한 페이지의 OnPointerDown 이벤트를위한 이벤트 핸들러가 필요합니다.

 document.onpointerdown = () => {    
  컨트롤 = document.querySelector ( '#control');
  if (control! == null) {control.remove (); document.getSelection (). removeallRanges ();}
}

이제 페이지의 컨트롤 및 선택은 페이지의 어느 곳에서나 선택 메뉴 컨트롤을 클릭 할 때 제거됩니다.

데모

Chris가 함께 모은 더 예방 된 버전은 다음과 같습니다.

다음은 선택 메뉴에서 하나 이상의 컨트롤을 보여주는 예입니다.

그것에 대해

우리가 그것을 사용할 필요는 없습니다. 대신 숨겨진 HTML 속성 또는 CSS 디스플레이와 같은 다른 방식으로 다른 방법으로 숨기고 표시 할 수도 있습니다. JavaScript 자체에서 선택 메뉴 컨트롤을 빌드 할 수도 있습니다. 코딩 선택은 효율적으로 실행하는 방법과 필요한 경우 응용 프로그램에 어떻게 적합한 지에 따라 다릅니다.

일부 UI/UX 조언

이것은 좋은 효과이지만, 좋은 사용자 경험을 보장하기 위해 그것을 사용할 때 고려해야 할 몇 가지 사항이 있습니다. 예를 들어, 텍스트 선택에 자신의 텍스트를 주입하지 마십시오. 자동 생성 트윗의 사이트에 대한 링크를 추가하는 것과 같이 알 수 있습니다. 방해적이고 성가시다. 소스 인용 추가와 같은 이유가 있으면 게시하기 전에 최종 텍스트의 미리보기를 보자. 그렇지 않으면 사용자가 추가로 혼란스러워하거나 놀랄 수 있습니다.

한 가지 더 : 메뉴 컨트롤이 끝나지 않는 것이 가장 좋습니다. 우리는 주변 내용을 너무 많이 덮고 싶지 않습니다. 이런 종류의 일은 CSS "데이터 손실"에 추가되며 우리는 그것을 피하고 싶습니다.

결론 : 사용자가 웹 사이트에서 텍스트를 선택 해야하는 이유를 이해하고 자신이하려는 일을 벗어나는 방식으로 컨트롤을 추가하십시오.

위 내용은 선택 API로 선택한 텍스트에 대한 작업을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!