Bagaimana cara menambahkan tombol di dalam textarea menggunakan Javascript?
Oke sahabat, terimakasih telah berkunjung ke sini yah
Pada artikel ini saya akan share cara membuat postingan di blogger atau di website lain dengan kolom dan tombol copy
Karena pastinya sahabat ingin share teks atau script atau lainnya
Kepastian ingin bisa di copy dengan mudah oleh para pengunjung.
Nah, disini saya akan kasih tau caranya
How to add button inside textarea using Javascript?
Klien saya ingin saya membuat area teks yang harus memiliki tombol seperti gambar berikut:
Pada gambar di atas, ikuti tepi kanan gambar di mana Anda dapat melihat tanda kurung biru yang merupakan tombolnya.
Ini seharusnya berfungsi seperti gambar kedua ini saat diklik (seperti dropdown):
Dari gambar ke-2 kita dapat melihat bahwa mengklik tombol kurung kurawal membuka daftar dan mengklik opsi daftar menulis di area teks. Tapi semuanya harus bekerja di sisi klien, jadi gunakan javascript atau jQuery, yang saya cukup baru. Jadi saya tidak bisa mulai dari sini. Saya membutuhkan saran cerdas Anda di atas bagaimana mencapai yang berikut ini. Sementara itu saya juga akan menyelidiki, jika saya menemukan sesuatu, saya akan memperbarui pertanyaan saya atau menjawab pertanyaan saya untuk orang lain. Terima kasih sebelumnya
Untuk mencapai ini, Anda dapat meletakkan kotak teks dan tombol di div yang sama dengan posisi:
disesuaikan dengan itu. Anda kemudian dapat mengatur posisi tombol:
absolute dan letakkan di pojok kanan atas. Sesuatu seperti ini:
----------------
Pasang script css di template
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
top: 0;
right: 0;
}
Lalu pasang ini postingan
<div class="textarea-container">
<textarea name="foo">teks postingan</textarea>
<button>Menu</button>
</div>
Ini adalah versi kurang lebih seperti yang Anda minta, tetapi karena div penampung menu harus ditempatkan di luar area teks, itu tidak dapat benar-benar pas secara dinamis di dalam area teks hanya dengan menggunakan CSS - jadi Anda harus menggunakan JavaScript.
Langkahnya dan script nya seperti ini
----------------
Pasang script css di template
* {
box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
display: none;
}
#textarea_container {
position: relative;
display: inline-block;
}
#textarea_container label {
background: blue;
color: white;
padding: .2em;
position: absolute;
top: 0;
right: 0;
padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
position: absolute;
top: 0;
right: 0;
overflow-y: scroll;
max-height: 15em;
min-height: 12em;
min-width: 10em;
border-left: 1.4em solid blue;
z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
display: block;
}
textarea {
min-height: 15em;
min-width: 40em;
}
#textareamenu:checked ~ label {
position: absolute;
right: 8.6em;
top: 0;
width: 1.4em;
z-index: 100;
}
Pasang di postingan
<div id="textarea_container">
<textarea name="text">teks postingan</textarea>
<input type="checkbox" id="textareamenu">
<label for="textareamenu">{}</label>
<div id="textareamenu_content">
<ul>
<li>First_Name</li>
<li>Last_Name</li>
</ul>
</div>
</div>
Jadi seperti itulah cara membuat postingan di blogger atau di website lain, jika ingin membuat box teks dengan tombol copy.
Agar memudahkan bagi para pengunjung kita, jika mereka ingin copy teks yang kita share
Komentar
Posting Komentar