Cách tự động đánh dấu văn bản khi người dùng nhấp
Một số phần nội dung trên các trang web được người dùng sao chép, chẳng hạn như địa chỉ URL, khóa API được tạo tự động hoặc một vài dòng mã (đoạn trích). Nhưng sao chép những nội dung này có thể là một thách thức, đặc biệt đối với người dùng đang sử dụng trackpad hoặc chuột nhảm nhí. Vì vậy, hãy làm cho họ dễ dàng hơn.
Nếu bạn đã tình cờ vào các trang web như TheNextWeb, bạn sẽ thấy rằng URL liên kết ngắn được tô sáng khi bạn nhấp vào nó. Hãy xem cách nó được thực hiện.
Bắt đầu
Để bắt đầu, chúng tôi đưa ra HTML bao bọc URL liên kết ngắn.
Đường tắthttp://goo.gl/9JEpOz
Chúng tôi có URL được bọc trong một khoảng yếu tố cùng với một biểu tượng từ Ionicon. Phong cách của các yếu tố này hoàn toàn phụ thuộc vào bạn, vì nó sẽ phụ thuộc vào bố cục trang web của bạn. Nhưng, với mục đích của bản demo này, tôi tạo kiểu theo cách này:
Nó đơn giản, màu xanh và hình vuông (lấy mã kiểu ở đây).
JavaScript
Và đây là thịt của mã, JavaScript. Kế hoạch ở đây là đánh dấu URL khi người dùng nhấp vào nó.
Chúng tôi bắt đầu mã với một biến chọn phần tử mà người dùng sẽ nhấp vào.
var target = document.querySelector ('. shortlink'); Các truy vấn là một phương thức JavaScript để chọn phần tử; về cơ bản nó hoạt động giống như hàm tạo của jQuery $ (). Bạn có thể sử dụng ký hiệu dấu chấm để lấy phần tử theo lớp hoặc # ký hiệu để lấy một phần tử bằng ID.
Tiếp theo, chúng ta cần tạo một hàm JavaScript mới.
lựa chọn chức năng (elem)
Chúng tôi đặt tên cho chức năng của chúng tôi là lựa chọn (). Và như bạn có thể thấy ở trên, hàm yêu cầu một tham số để truyền phần tử bao bọc URL hoặc bất kỳ văn bản thông thường nào chúng tôi muốn làm nổi bật. Trong trường hợp của chúng tôi, đây sẽ là khoảng yếu tố với shortlink__url lớp học.
Trong hàm này, chúng tôi thêm một vài biến:
var target = document.querySelector ('. shortlink'); lựa chọn chức năng (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var phạm vi = document.createRange (); Đầu tiên elem biến chọn phần tử mà chúng ta chuyển qua tham số của hàm. Biến thứ hai, lựa chọn, chạy một hàm JavaScript gốc để có được lựa chọn văn bản. Biến cuối cùng, phạm vi kiểm soát phạm vi lựa chọn; chúng tôi muốn đảm bảo rằng lựa chọn chỉ trong phạm vi phần tử được chọn.
Tiếp theo, chúng tôi xâu chuỗi các biến này với một vài hàm JavaScript khác như sau:
var target = document.querySelector ('. shortlink'); lựa chọn chức năng (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var phạm vi = document.createRange (); phạm vi.selectNodeContents (elem); select.addRange (phạm vi); Bổ sung đầu tiên, phạm vi.selectNodeContents (elem), định nghĩa phạm vi lựa chọn trong trường hợp này là phần tử như được đề cập trong elem. Dòng cuối cùng, select.addRange (phạm vi) làm cho lựa chọn giới hạn trong phạm vi được chỉ định.
Tuyệt quá! Chúng ta đều được thiết lập với chức năng. Chúng ta hãy hành động.
Chạy nó
Chúng tôi liên kết phần tử đích với một trong một cái nhấp chuột biến cố. Khi phần tử được nhấp, chúng tôi chạy hàm chúng tôi vừa thực hiện và truyền tham số với tên lớp của phần tử nơi URL được bọc; trong trường hợp này là .shortlink__url.
target.onclick = function () select ('. shortlink__url'); ; Chúng ta xong rồi. Như đã đề cập trước đó, bạn cũng có thể làm như vậy đối với các loại nội dung khác trên trang web của mình mà bạn có thể muốn người dùng của mình sao chép dễ dàng hơn.
Một số bạn có thể tự hỏi nếu chúng tôi có thể tự động bản sao, thay vì chỉ tô sáng, shorturl khi người dùng nhấp chuột. Mặc dù điều này có vẻ như là một ý tưởng thực sự tốt, nhưng thật không may là không dễ để đạt được và có thể gây ra trải nghiệm người dùng xấu. Hành động sao chép phải hoàn toàn dưới sự đồng ý của người dùng.
Các bước trong bài viết này chỉ đưa nó đến hành động nổi bật. Người dùng của chúng tôi có sao chép hay không hoàn toàn tùy thuộc vào họ.
Bạn có thể theo dõi qua các liên kết sau để xem bản demo hoặc tải xuống mã nguồn.
- Xem bản demo
- Tải xuống nguồn
