Membuat Tebal Tulisan di Textarea menggunakan JavaScript dan jQuery

Contoh Kasus:

Saya mempunyai konsep seperti terlihat pada gambar dibawah ini:

Keterangan:

Jadi pada kotak paling kiri adalah <textarea> dan kotak paling kanan adalah <p>

Keinginan:

Saya mengetikkan tulisan “Fahmi Basya Kartapura adalah programmer PHP” pada textarea

Lalu saya seleksi tulisan “Fahmi Basya Kartapura” seperti terlihat pada gambar dibawah ini:

Selanjutnya saya tekan tombol “Tebalkan Tulisan yang diseleksi” maka akan menghasilkan hasil seperti tampilan dibawah ini:

Pertanyaan:

Bagaimana cara membuat kodenya … ?

Jawaban:

Buatlah sebuah file HTML bernama penebalanTeks.html dengan isi seperti terlihat pada kode dibawah ini:

<html>
<head> 

<script src=”jquery-1.8.0.js”></script>

</head>
<body>
<table>
<tr>

<td>

Komentar: <textarea name=”Komentar” id=”Komentar” rows=”5″ cols=”20″ class=’teks’></textarea>

</td>

<td>

<p style=”border:1px solid grey; width:160px; height:96px;” class=’teks’></p>

</td>

</tr>
<tr>

<td colspan=’3′ align=’center’>

<button>Tebalkan Tulisan yang diseleksi</button>

</td>

</tr>
</table>

<script>

function spliceString(tulisanSeluruhnya, posisiAwal, selisihAkhirAwal, tulisanYangDimasukkan) {

return tulisanSeluruhnya.substring(0, posisiAwal) + tulisanYangDimasukkan + tulisanSeluruhnya.substr(posisiAwal + selisihAkhirAwal);

}

$(“button”).click(function(){

var komentar=$(‘#Komentar’);
var txtKomentar=$(‘#Komentar’).val();
var posisiAwal=komentar.get(0).selectionStart
var posisiAkhir=komentar.get(0).selectionEnd
var teksTerpilih=txtKomentar.substring(posisiAwal, posisiAkhir)
var teksTebal='<b>’+teksTerpilih+'</b>’
var isi = spliceString(txtKomentar, posisiAwal, posisiAkhir-posisiAwal, teksTebal);

$(‘#Komentar’).val(isi);
$(‘p’).html(isi);

});

</script>

</body>
</html>

Keterangan:

  • $(‘#Komentar’).val(), Kode ini digunakan untuk mengambil nilai dari elemen yang mempunyai id=’Komentar’
  • komentar.get(0).selectionStart, Kode ini berarti saya mengambil posisi awal seleksi dari elemen berindex nol dari objek komentar.
  • komentar.get(0).selectionEnd, Kode ini berarti saya mengambil posisi akhir seleksi dari elemen berindex nol dari objek komentar.
  • txtKomentar.substring(posisiAwal, posisiAkhir), Kode ini digunakan untuk mengambil tulisan yang sedang kita seleksi.
  • spliceString(txtKomentar, posisiAwal, posisiAkhir-posisiAwal, teksTebal), Kode ini digunakan untuk memasukkan seleksi tulisan yang kita modifikasi ke tempat asalnya.
  • $(‘#Komentar’).val(isi), Kode ini digunakan untuk memasukkan nilai dari variabel isi ke dalam textarea yang mempunyai id=’Komentar’

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *