Tạo vùng hiển thị đoạn Text, code

Vùng hiển thị đoạn text hay code là nơi (area) mà tác giả muốn lưu trữ, hay chứa trong đó thông tin để người đọc có thể copy, sao chép.
Thông thường vùng hiển thị này để lưu những đoạn text hay các đoạn mã code cho khách viếng thăm sao chép nội dung.
Để thực hiện được điều này, bạn có thể sao chép code sau;




<p align="left">
<textarea name="code" rows="6" cols="40" onclick="this.select()">
Đây là đoạn văn bản hay code cần hiển thị
</textarea>
</p>
Ví dụ:

<a href="http://www.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif" border="0" alt="Blog Tutorial" /></a>

Chú ý;

rows="6" biểu thị chiều cao của vùng hiển thị, bạn có thể tuỳ ý thay đổi chỉ số này tuỳ thuộc vào chiều cao cần thiết cho vùng hiển thị.

cols="40" biểu thị chiều rộng của đoạn văn bản, chỉ số này được thay đổi tuỳ thuộc vào chiều rộng mà bạn cần thể hiện.

onclick="this.select()" là lệnh để khi bạn click chuột vào tất cả đoạn code bên trong đã được bôi đen

Ngoài ra bạn có thể tạo vùng hiển thị văn bản với nút "Highlight" để khi clock vào nút này thì đoạn văn bản hay code cần hiển thị sẽ được bôi đen để bạn copy.

Nút Highlight giúp cho khách truy cập có thể dễ dàng seo chép toàn bộ nôi dung hoặc code. Nếu khi khách truy cập click vào nút Highlight thì toàn bộ vùng dữ liệu sẽ tự động được chọn, và việc cảu khách truy cập là chỉ việc sao chép mà thôi.

Tiện ích này rất hữu ích, đặc biệt là đối với đoạn văn bản hay code dài . Để tạo vùng văn bản hay code kiểu này, bạn có thể copy đoạn mã HTML sau:

<div>
<form name="copy">
<div align="left">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All">
</div>
<div align="left"> </div>
<p align="left">
<textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">
Đoạn văn bản hay code cho khách truy cập sao chép
</textarea></p>
</form>
</div>

Ví dụ:

<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </script></span>

Để hiểu rõ hơn, xin giải thích cụ thể về các mã trên cho các bạn hiểu cặn kẽ hơn. Như ví dụ trên bao gồm hai thành phần (yếu tố) chính.
Thứ nhất là các đoạn mã thực hiện nút Highlight all
Thứ hai là đoạn mã để thực hiện hiển thị vùng text.
Thành phần yếu tố để tạo nút highlight all:

1. <div align="left"> --> left để vị trí nút highlight all hiển thị bên tay trái. Nếu bạn muốn nó hiển thị ở đâu dó thì thay đổi chỉ số (left) thành (right), (middle).
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> Đoạn mã này có ý nghĩa là khi click vào nút này thì toạn bộ đoạn văn bản sẽ được đánh dấu chọn (sáng). Bạn không nên thay đổi đoạn mã này.
3. Value="Highlight All" --> từ Highlight All là từ hiển thị ở trên nút chọn. Bạn có thể tuỳ ý thay đổi tên này.

Thành phần yếu tố hiển thị đoạn văn bản:

1. <p align="left"> --> Tương tự như đã trình bày ở trên, đây là đoạn mã để chỉ rõ đoạn text hiển thị ở vị trí nào..
2. <text style="WIDTH: 300px"> –> từ "WIDTH: 300px" hiển thị chiểu rộng đoạn text hiển thị, cũng như trên, bạn có thể thay đổi giá trị này.
3. HEIGHT: 144px --> thể hiện chiều cao đoạn văn bản hiển thị, bạn cũng có thể thay đổi giá trị này tuỳ thuộc vào bạn.

Hãy thực hiện cách làm này với các đoạn văn bản hay đoạn code bạn cần hiển thị trong bài viết. Chúc các bạn may mắn!!!