Banyak hal bisa dilakukan melalui textarea, seperti misalnya untuk link exchange atau tukar link. Textarea bisa juga digunakan untuk posting kode html, kode css atau javascript. Agar pembaca/pengunjung blog dapat dengan mudah mengcopy seluruh konten yang tersimpan dalam textarea anda dapat menambahkan fungsi highlight all/select all. Javascript yang sangat sederhana dapat ditambahkan untuk menciptakan fungsi tersebut. Javascript dapat disimpan terpisah, namun dapat juga dibuat terpadu dalam html textarea.
Highlight All/Select All tanpa "button select"
Menggunakan textarea untuk menampilkan kode html, css dan javascript.<textarea cols="50" rows="10" onclick="this.focus();this.select()">
.jambul{
height:120px;
width:419px;
padding:10px 5px 10px 20px;
margin:20px 0;
font:normal 14px Arial;
color:#900;
text-shadow:1px 1px 1px #ccc;
line-height:20px;
}
<script type="text/javascript">
function copyToClipBoard(sContents)
{
window.clipboardData.setData("Text", sContents);
alert("The contents have been copied to your clipboard.\t");
}
</script>
<div class="mybox">Content here!</div>
</textarea>
Menggunakan textarea untuk link exchange.
<textarea cols="50" rows="5" onclick="this.focus();this.select()">
<a href="http://gubhugreyot.blogspot.com" target="_blank">
<img border="0" alt="Tutorial Blogger, Tutorial Blogdetik" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhadck29DHdDL20CSShN9l2XSlMf3LAqYTrgxGMbwdmZIsB8IaCywLM_D2zIRtq5p0VF53yWT9OSUA0KwUhv1U20m9LQtcWh9C7qJ1E0bw30ne_iEr6MihoGX5pC0SiEbEzYOcDJUaP_0E/s70/monyet-pakai-kacamata.jpg" width="70" height="65" />
</a>
</textarea>Highlight All/Select All menggunakan "button select"
<form> <input type="button" value="Highlight Text" onClick="javascript:this.form.area_1.focus();this.form.area_1.select();"><br /> <textarea name="area_1" rows="5" cols="50"> Text here! Text here! Text here! </textarea> </form>
<form name="gombal"> <input type="button" onclick="javascript:this.form.area_2.focus();this.form.area_2.select();" value="Select All"/><br /> <textarea rows="5" cols="40" rows="8" cols="50" name="area_2" readonly> Text here! Text here! Text here! Text here! </textarea> </form>
Di bawah ini telah disertakan contoh textarea yang telah dilengkapai dengan fungsi "Hightlight All" dan "Select All" dengan dan tanpa button "Highlight all" atau "Select All". Silahkan lakukan beberapa perubahan kode untuk mendapatkan textarea seperti yang anda inginkan.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar