사용자 클릭시 텍스트 자동 강조 방법

웹 사이트의 일부 콘텐츠는 URL 주소, 자동 생성 된 API 키 또는 몇 줄의 코드 (스 니펫)와 같이 사용자가 복사해야합니다. 그러나 이러한 내용을 복사하는 것은 어려울 수 있습니다. 특히 트랙 패드 또는 진절머리 나는 마우스를 사용하는 사용자에게는 더욱 그렇습니다. 자 이제 더 쉽게 만들어 보겠습니다..

TheNextWeb과 같은 웹 사이트를 발견하면 링크를 클릭하면 강조 표시됩니다. 이것이 어떻게 행해지는지 확인해 봅시다..

시작하기

우선, 짧은 링크 URL을 래핑하는 HTML을 배치합니다..

 
 바로 가기 
  http://goo.gl/9JEpOz 
 
 

우리는 URL을 스팬 요소를 Ionicon의 아이콘과 함께 표시합니다. 이러한 요소의 스타일은 웹 사이트 레이아웃에 따라 달라 지므로 전적으로 귀하에게 달려 있습니다. 그러나,이 데모의 목적을 위해, 나는 이렇게 스타일을 짓습니다 :

그것은 단순하고, 파랗고 정사각형이다 (여기 스타일 코드를 잡아라).

자바 스크립트

여기 코드의 핵심 인 자바 스크립트가 있습니다. 계획은 여기에있다. 사용자가 클릭 할 때 URL을 강조 표시하십시오..

사용자가 클릭 할 요소를 선택하는 변수로 코드를 시작합니다..

 var target = document.querySelector ( '. 짧은 링크'); 

그만큼 querySelector 요소를 선택하는 JavaScript 메소드입니다. 그것은 기본적으로 jQuery 생성자와 같이 작동합니다. $ (). 도트 표기법을 사용하여 클래스 또는 요소로 요소를 가져올 수 있습니다. # ID로 요소를 가져 오는 표기법.

다음으로 새로운 JavaScript 함수를 만들어야합니다..

 함수 선택 (elem)  

우리의 이름을 선택(). 위에서 볼 수 있듯이이 함수는 URL이나 일반 텍스트를 감싸는 요소를 전달하는 매개 변수가 필요합니다. 우리의 경우, 이것은 스팬 요소가있는 shortlink__url 수업.

이 함수 내에서 몇 가지 변수를 추가합니다.

 var target = document.querySelector ( '. 짧은 링크'); 함수 선택 (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

첫째, 엘름 변수는 함수의 매개 변수를 통과하는 요소를 선택합니다. 두 번째 변수, 고르다, 네이티브 JavaScript 함수를 실행하여 텍스트 선택을 가져옵니다. 마지막 변수, 범위 선택 범위를 제어합니다. 우리는 선택된 요소 내에서만 선택을하고 싶습니다..

다음으로, 우리는 다음과 같이 몇 가지 다른 JavaScript 함수를 사용하여 이러한 변수를 연결합니다.

 var target = document.querySelector ( '. 짧은 링크'); 함수 선택 (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (range);  

첫 번째 추가, range.selectNodeContents (elem), 정의하다 선택 범위 이 경우이 요소는 엘름. 마지막 줄, select.addRange (range) 선택 범위를 지정된 범위로 제한합니다..

큰! 우리는 모두 기능을 갖추고 있습니다. 행동하자.

실행

우리는 target 요소를 onclick 행사. 요소가 클릭 될 때 방금 만든 함수를 실행하고 URL이 래핑 된 요소의 클래스 이름으로 매개 변수를 전달합니다. 이 경우에는 .shortlink__url.

 target.onclick = function () selection ( '. shortlink__url'); ; 

우리는 끝났어. 앞서 언급했듯이 웹 사이트에서 사용자가 더 쉽게 복사 할 수 있도록하려는 다른 유형의 콘텐츠에 대해서도 그렇게 할 수 있습니다.

여러분 중 일부는 우리가 자동으로 부, 그냥 강조 표시하는 대신 사용자가 클릭 할 때 단발이 발생합니다. 이것이 실제로 좋은 아이디어 인 것처럼 보이지만 불행히도 달성하기가 쉽지 않고 나쁜 사용자 경험을 유발할 수 있습니다. 복사 작업은 사용자의 동의하에 완전히 이루어져야합니다..

이 게시물의 단계는 강조 표시 작업에만 적용됩니다. 사용자가 복사할지 여부는 전적으로 사용자에게 달려 있습니다..

다음 링크를 통해 데모를 보거나 소스 코드를 다운로드 할 수 있습니다..

• 데모보기
• 소스 다운로드