Menggunakan Perintah Select dalam Javascript

Share

"Om Swastiastu"

Ketika kita ingin mengedit suatu textfield, tentunya kita ingin cara yang sangat singkat untuk melakukan pengeditan. Misalkan ketika kalian menekan sebuah tombol edit, maka akan muncul textbox yang valuenya langsung diselect seperti gambar disamping, sehingga kalian bisa langsung mengubah data textbox tersebut tanpa harus mengarahkan pointer mouse ke textbox tersebut untuk mengaktifkan textarea tersebut. Atau pada kasus umum, terdapat sebuah textarea, dan sebuah tombol select all, ketika tombol select all diklik, maka keseluruhan isi textarea akan terblok atau diselect.


Untuk melakukan hal ini kita bisa memanfaatkan fungsi select() yang tersedia pada javascript. Pertama misalkan terdapat sebuah div yang didalamnya terdapat tulisan IT Programmer. Lalu kita ingin mengganti tulisan tersebut dan menyediakan sebuah button edit dimana bila button ini diklik, maka tulisan  IT Programmer  akan berganti menjadi sebuah textbox yang nilai/isinya adalah IT Programmer dan isi dari textbox tersebut langsung diblok atau diselect secara otomatis, sehingga kita bisa langsung mengedit isinya tanpa mengarahkan pointer mouse terlebih dulu ke textbox tersebut. Berikut adalah contohnya:

<div id="edit"> IT Programmer  <input type="button" value="edit" onclick="editIni()"></div>

Koding diatas, kita membuat div yang ditengahnya terdapat tulisan IT Programmer dan tombol edit. Sekarang kita buat sebuah fungsi dalam javascript untuk melakukan pengeditan tersebut.

<script type="text/javascript">
function editIni(){
var tulisan = " IT Programmer ";
document.getElementById("edit").innerHTML = "<input type='text' value='"+tulisan+"' id='tulisan'><br/><input type='button' value='Submit' onclick='lakukanEdit()'>";
document.getElementById("tulisan").select();
}

function lakukanEdit(){
var tulisan = document.getElementById("tulisan").value;
document.getElementById("edit").innerHTML = ""+tulisan;
}
</script>

Ketika tombol edit di klik, maka didalam div akan segera muncul textbox yang nilainya dapat diganti, apabila tombol submit di klik, maka tulisan didalam div berubah menjadi apa yang kita ketikkan di dalam textbox tersebut. Gampang bukan, kalian tinggalkan kembangkan script diatas sesuai kebutuhan kalian. Semoga bermanfaat.


"Om Santhi, Santhi, Santhi, Om"