Created
November 7, 2014 02:54
-
-
Save cod3beat/d3f5a77a5f57fbd13cad to your computer and use it in GitHub Desktop.
// source http://jsbin.com/qedifo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div> | |
| <textarea id="contoh" cols="30" rows="10"></textarea> | |
| </div> | |
| <div> | |
| <button id="cek">Cek</button> | |
| </div> | |
| <div> | |
| <label for="jumlah">Jumlah baris</label> | |
| <input type="text" id='jumlah'> | |
| </div> | |
| <div> | |
| <label for="jumlah-cols">Jumlah baris ketika cols diasumsikan tetap</label> | |
| <input type="text" id='jumlah-cols'> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| var contoh = document.getElementById('contoh'), | |
| checker = document.getElementById('cek'), | |
| jumlah = document.getElementById('jumlah'), | |
| jumlahCols = document.getElementById('jumlah-cols'); | |
| checker.addEventListener('click', function() { | |
| hitungColsTetap(contoh); | |
| perhitunganYangBelumTentuAkurat(contoh); | |
| }); | |
| function hitungColsTetap(el) { | |
| jumlahCols.value = Math.ceil((el.textLength-1)/el.cols); | |
| } | |
| function perhitunganYangBelumTentuAkurat(el) { | |
| // berapa lebar dari textarea | |
| var width = el.clientWidth, | |
| fontSize = parseFloat(window.getComputedStyle(el, null).getPropertyValue('font-size')); | |
| // Kita menghitung lebar dari teks. Hal ini dilakukan | |
| // dengan cara mengambil seluruh teks yg ditulis | |
| // di dalam textarea, kemudian menempelkannya | |
| // pada sebuah div. | |
| // | |
| // Dari situ kita dapat mengetahui berapa lebar teks. | |
| // | |
| // Kemudian kita tinggal membandingkan lebar teks dengan | |
| // lebar textarea | |
| // | |
| // Ya..begitu ide dasarnya | |
| var lebarTeks = hitungLebarTeks(contoh.value, fontSize); | |
| jumlah.value = Math.ceil(lebarTeks / width); | |
| } | |
| function hitungLebarTeks(teks, fontSize) { | |
| var tersembunyi = document.createElement('div'); | |
| tersembunyi.style.position= 'absolute'; | |
| tersembunyi.style.float = 'left'; | |
| tersembunyi.style.visibility = 'hidden'; | |
| tersembunyi.style.whiteSpace = 'nowrap'; | |
| tersembunyi.style.fontSize = fontSize + 'px'; | |
| tersembunyi.textContent = teks; | |
| var appended = document.body.appendChild(tersembunyi); | |
| return appended.clientWidth; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var contoh = document.getElementById('contoh'), | |
| checker = document.getElementById('cek'), | |
| jumlah = document.getElementById('jumlah'), | |
| jumlahCols = document.getElementById('jumlah-cols'); | |
| checker.addEventListener('click', function() { | |
| hitungColsTetap(contoh); | |
| perhitunganYangBelumTentuAkurat(contoh); | |
| }); | |
| function hitungColsTetap(el) { | |
| jumlahCols.value = Math.ceil((el.textLength-1)/el.cols); | |
| } | |
| function perhitunganYangBelumTentuAkurat(el) { | |
| // berapa lebar dari textarea | |
| var width = el.clientWidth, | |
| fontSize = parseFloat(window.getComputedStyle(el, null).getPropertyValue('font-size')); | |
| // Kita menghitung lebar dari teks. Hal ini dilakukan | |
| // dengan cara mengambil seluruh teks yg ditulis | |
| // di dalam textarea, kemudian menempelkannya | |
| // pada sebuah div. | |
| // | |
| // Dari situ kita dapat mengetahui berapa lebar teks. | |
| // | |
| // Kemudian kita tinggal membandingkan lebar teks dengan | |
| // lebar textarea | |
| // | |
| // Ya..begitu ide dasarnya | |
| var lebarTeks = hitungLebarTeks(contoh.value, fontSize); | |
| jumlah.value = Math.ceil(lebarTeks / width); | |
| } | |
| function hitungLebarTeks(teks, fontSize) { | |
| var tersembunyi = document.createElement('div'); | |
| tersembunyi.style.position= 'absolute'; | |
| tersembunyi.style.float = 'left'; | |
| tersembunyi.style.visibility = 'hidden'; | |
| tersembunyi.style.whiteSpace = 'nowrap'; | |
| tersembunyi.style.fontSize = fontSize + 'px'; | |
| tersembunyi.textContent = teks; | |
| var appended = document.body.appendChild(tersembunyi); | |
| return appended.clientWidth; | |
| } | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var contoh = document.getElementById('contoh'), | |
| checker = document.getElementById('cek'), | |
| jumlah = document.getElementById('jumlah'), | |
| jumlahCols = document.getElementById('jumlah-cols'); | |
| checker.addEventListener('click', function() { | |
| hitungColsTetap(contoh); | |
| perhitunganYangBelumTentuAkurat(contoh); | |
| }); | |
| function hitungColsTetap(el) { | |
| jumlahCols.value = Math.ceil((el.textLength-1)/el.cols); | |
| } | |
| function perhitunganYangBelumTentuAkurat(el) { | |
| // berapa lebar dari textarea | |
| var width = el.clientWidth, | |
| fontSize = parseFloat(window.getComputedStyle(el, null).getPropertyValue('font-size')); | |
| // Kita menghitung lebar dari teks. Hal ini dilakukan | |
| // dengan cara mengambil seluruh teks yg ditulis | |
| // di dalam textarea, kemudian menempelkannya | |
| // pada sebuah div. | |
| // | |
| // Dari situ kita dapat mengetahui berapa lebar teks. | |
| // | |
| // Kemudian kita tinggal membandingkan lebar teks dengan | |
| // lebar textarea | |
| // | |
| // Ya..begitu ide dasarnya | |
| var lebarTeks = hitungLebarTeks(contoh.value, fontSize); | |
| jumlah.value = Math.ceil(lebarTeks / width); | |
| } | |
| function hitungLebarTeks(teks, fontSize) { | |
| var tersembunyi = document.createElement('div'); | |
| tersembunyi.style.position= 'absolute'; | |
| tersembunyi.style.float = 'left'; | |
| tersembunyi.style.visibility = 'hidden'; | |
| tersembunyi.style.whiteSpace = 'nowrap'; | |
| tersembunyi.style.fontSize = fontSize + 'px'; | |
| tersembunyi.textContent = teks; | |
| var appended = document.body.appendChild(tersembunyi); | |
| return appended.clientWidth; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment