»
Tiếng AnhTiếng PhápTiếng Việt

In - Văn bản tự chọn khi nhấn chuột - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Văn bản tự chọn khi nhấn chuột
URL: https://www.javascriptbank.com/javascript-text-auto-select-onclick.html

Văn bản tự chọn khi nhấn chuột © JavaScriptBank.comKhi đoạn mã JavaScript này được cài đặt trên trang web, mỗi khi người dùng nhấn chọn bất kì thẻ HTML chứa nội dung văn bản nào, nó sẽ tự động chọn (tô khối) tất cả văn bản trong đó. Một hiệu ứng cũng khá hữu ích với website chứa nhiều văn bản.Hiện tại đoạn mã JavaScript này được lập trình để làm việc với các đối tượng thẻ là input, textarea, div, span, td, và pre. Bạn có thể dễ dàng chỉnh sửa để tạo thêm nhiều tính năng khác.

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Văn bản tự chọn khi nhấn chuột
URL: https://www.javascriptbank.com/javascript-text-auto-select-onclick.html



JavaScript
<script type="text/javascript">// Created by: Matt Murphy | http://www.matts411.com/// This script downloaded from www.JavaScriptBank.comfunction autoSelect(selectTarget) { if(selectTarget != null && ((selectTarget.childNodes.length == 1      && selectTarget.childNodes[0].nodeName == "#text") || (selectTarget.tagName == "INPUT"      && selectTarget.type == "text"))) {  if(selectTarget.tagName == 'TEXTAREA' || (selectTarget.tagName == "INPUT" && selectTarget.type == "text")) {   selectTarget.select();  } else if(window.getSelection) { // FF, Safari, Opera   var sel = window.getSelection();   var range = document.createRange();   range.selectNode(selectTarget.firstChild);   sel.removeAllRanges();   sel.addRange(range);  } else { // IE   document.selection.empty();   var range = document.body.createTextRange();   range.moveToElementText(selectTarget);   range.select();  } }}</script>


HTML
<h4 style="margin-bottom: 0;">A <code>div</code> Element:</h4><div onclick="autoSelect(this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices vestibulum elit. Mauris congue sapien sed dolor. Pellentesque sem augue, porttitor id, placerat ac, congue ac, eros. Etiam fermentum consectetuer pede. Donec tincidunt. Suspendisse non nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer porta egestas sapien.</div><h4 style="margin-bottom: 0;">An <code>input</code> Element:</h4><input type="text" size="50" onclick="autoSelect(this);" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."><h4 style="margin-bottom: 0;">A <code>textarea</code> Element:</h4><textarea rows="5" cols="30" onclick="autoSelect(this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices vestibulum elit. Mauris congue sapien sed dolor. Pellentesque sem augue, porttitor id, placerat ac, congue ac, eros. Etiam fermentum consectetuer pede.</textarea><h4 style="margin-bottom: 0;">A <code>pre</code> Element:</h4><pre onclick="autoSelect(this);">function toggle_visibility(id) {  var e = document.getElementById(id);  if(e.style.display == 'none')    e.style.display = 'block';  else    e.style.display = 'none';}</pre>