Saat ini saya mengerjakan aplikasi penjualan internal untuk perusahaan tempat saya bekerja, dan saya memiliki formulir yang memungkinkan pengguna mengubah alamat pengiriman.
Sekarang saya pikir itu akan terlihat jauh lebih bagus, jika textarea yang saya gunakan untuk detail alamat utama hanya akan mengambil area teks di dalamnya, dan secara otomatis mengubah ukuran jika teks diubah.
Berikut tangkapan layarnya saat ini.
Ada ide?
@Tokopedia
Poin yang bagus, tetapi ada alasan saya ingin mengubah ukurannya. Saya ingin area yang dibutuhkan menjadi area informasi yang terkandung di dalamnya. Seperti yang Anda lihat di tangkapan layar, jika saya memiliki textarea tetap, ini membutuhkan ruang vertikal yang lumayan.
Saya bisa memperkecil font, tapi saya butuh alamat yang besar dan bisa dibaca. Sekarang saya bisa mengurangi ukuran area teks, tapi kemudian saya punya masalah dengan orang yang memiliki baris alamat yang membutuhkan 3 atau 4 (satu membutuhkan 5) baris. Membutuhkan pengguna untuk menggunakan scrollbar adalah hal yang tidak-tidak.
Saya kira saya harus lebih spesifik. Saya setelah mengubah ukuran vertikal, dan lebarnya tidak terlalu penting. Satu-satunya masalah yang terjadi dengan itu, adalah nomor ISO (besar "1") didorong ke bawah alamat ketika lebar jendela terlalu kecil (seperti yang Anda lihat pada tangkapan layar).
Ini bukan tentang memiliki gimick; ini tentang memiliki bidang teks yang dapat diedit pengguna yang tidak akan memakan ruang yang tidak perlu, tetapi akan menampilkan semua teks di dalamnya.
Meskipun jika seseorang menemukan cara lain untuk mendekati masalah, saya terbuka untuk itu juga.
Saya telah mengubah kode sedikit karena tingkahnya agak aneh. Saya mengubahnya untuk mengaktifkan pada keyup, karena itu tidak akan mempertimbangkan karakter yang baru saja diketik.
resizeIt = function() {
var str = $('iso_address').value;
var cols = $('iso_address').cols;
var linecount = 0;
$A(str.split("\n")).each(function(l) {
linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
})
$('iso_address').rows = linecount;
};
Jawaban:
Facebook melakukannya, ketika Anda menulis di dinding orang, tetapi hanya mengubah ukurannya secara vertikal.
Perubahan ukuran horizontal menurut saya berantakan, karena pembungkus kata, garis panjang, dan sebagainya, tetapi perubahan ukuran vertikal tampaknya cukup aman dan menyenangkan.
Tak satu pun dari pengguna baru Facebook yang saya kenal pernah menyebutkan sesuatu tentangnya atau bingung. Saya akan menggunakan ini sebagai bukti anekdotal untuk mengatakan 'lanjutkan, terapkan'.
Beberapa kode JavaScript untuk melakukannya, menggunakan Prototype (karena itulah yang saya kenal):
PS: Jelas sekali kode JavaScript ini sangat naif dan tidak teruji dengan baik, dan Anda mungkin tidak ingin menggunakannya di kotak teks dengan novel di dalamnya, tetapi Anda memahami gambaran umumnya.
sumber
<textarea cols='5'>0 12345 12345 0</textarea>
. (Saya menulis implementasi yang hampir identik dan tidak menangkap ini sampai setelah sebulan menggunakannya.) Itu juga gagal untuk baris kosong.Salah satu perbaikan untuk beberapa jawaban ini adalah membiarkan CSS melakukan lebih banyak pekerjaan.
Rute dasarnya tampaknya:
textarea
dan yang tersembunyidiv
textarea
'isi s disinkronisasikan dengandiv
' sdiv
, kami menghindari pengaturan tinggi secara eksplisittextarea
.sumber
var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' ';
memastikan Anda tidak mendapatkan perilaku tersentak-sentak saat berpindah dari baris baru yang kosong di akhir textarea ke yang tidak kosong, karena div tersembunyi memastikan untuk membungkus ke nbsp.Berikut teknik lain untuk mengubah ukuran area teks secara otomatis.
Kode: (JavaScript vanilla biasa)
Demo: (menggunakan jQuery, target pada textarea yang saya ketik sekarang - jika Anda menginstal Firebug , tempelkan kedua sampel ke konsol dan uji di halaman ini)
sumber
clientHeight
danscrollHeight
sama, jadi Anda tidak dapat menggunakan metode ini jika Anda ingin textarea Anda menyusut dan juga bertambah.if (text.clientHeight == text.scrollHeight) text.style.height = "20px";
Mungkin solusi terpendek:
Dengan cara ini Anda tidak memerlukan div tersembunyi atau semacamnya.
Catatan: Anda mungkin harus bermain-main dengan
this.style.height = (this.scrollHeight) + "px";
tergantung pada bagaimana Anda menata textarea (tinggi baris, padding, dan semacamnya).sumber
keyup
bisa cukup, tapi saya tidak yakin. Saya sangat senang karena saya menemukan jawabannya, sehingga saya berhenti mencoba hal lain.Berikut adalah versi Prototipe dari mengubah ukuran area teks yang tidak bergantung pada jumlah kolom di textarea. Ini adalah teknik yang unggul karena memungkinkan Anda untuk mengontrol area teks melalui CSS serta memiliki textarea lebar variabel. Selain itu, versi ini menampilkan jumlah karakter yang tersisa. Meskipun tidak diminta, ini adalah fitur yang sangat berguna dan mudah dihapus jika tidak diinginkan.
Buat widget dengan menelepon
new Widget.Textarea('element_id')
. Opsi default dapat diganti dengan meneruskannya sebagai objek, misnew Widget.Textarea('element_id', { max_length: 600, min_height: 50})
. Jika Anda ingin membuatnya untuk semua area teks di halaman, lakukan sesuatu seperti:sumber
Inilah solusinya dengan
JQuery
:abc
adalah ateaxtarea
.sumber
Periksa tautan di bawah ini: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
sumber
Baru saja meninjau ini, saya telah membuatnya sedikit lebih rapi (meskipun seseorang yang menggunakan Prototipe / JavaScript dapat menyarankan perbaikan?).
Cukup sebut dengan:
sumber
Saya telah membuat sesuatu yang sangat mudah. Pertama saya menempatkan TextArea menjadi DIV. Kedua, saya telah memanggil
ready
fungsi ke skrip ini.Sederhana. Ini adalah tinggi maksimum div setelah dirender, dibagi dengan tinggi satu TextArea dalam satu baris.
sumber
Saya membutuhkan fungsi ini untuk diri saya sendiri, tetapi tidak satu pun dari sini yang berfungsi seperti yang saya butuhkan.
Jadi saya menggunakan kode Orion dan mengubahnya.
Saya menambahkan ketinggian minimum, sehingga pada penghancuran itu tidak terlalu kecil.
sumber
Seperti jawaban @memical.
Namun saya menemukan beberapa perbaikan. Anda dapat menggunakan
height()
fungsi jQuery . Namun perhatikan piksel padding-top dan padding-bottom. Jika tidak, textarea Anda akan tumbuh terlalu cepat.sumber
Solusi saya tidak menggunakan jQuery (karena terkadang tidak harus sama) ada di bawah. Meskipun ini hanya diuji di Internet Explorer 7 , sehingga komunitas dapat menunjukkan semua alasan mengapa ini salah:
Sejauh ini saya sangat suka cara kerjanya, dan saya tidak peduli dengan browser lain, jadi saya mungkin akan menerapkannya ke semua area teks saya:
sumber
Berikut adalah ekstensi untuk widget Prototipe yang diposting Jeremy pada tanggal 4 Juni:
Ini menghentikan pengguna memasukkan lebih banyak karakter jika Anda menggunakan batasan di area teks. Ia memeriksa apakah ada karakter yang tersisa. Jika pengguna menyalin teks ke dalam textarea, teks tersebut dipotong maksimal. panjangnya:
sumber
@memical memiliki solusi luar biasa untuk mengatur ketinggian textarea pada pageload dengan jQuery, tetapi untuk aplikasi saya, saya ingin dapat meningkatkan ketinggian textarea saat pengguna menambahkan lebih banyak konten. Saya membangun solusi memical dengan yang berikut:
Ini tidak terlalu mulus tetapi juga bukan aplikasi yang menghadap ke klien, jadi kelancaran tidak terlalu penting. (Seandainya ini berhadapan dengan klien, saya mungkin hanya akan menggunakan plugin jQuery ubah ukuran otomatis.)
sumber
Bagi mereka yang melakukan pengkodean untuk IE dan mengalami masalah ini. IE memiliki sedikit trik yang membuatnya 100% CSS.
Anda bahkan dapat memberikan nilai untuk baris = "n" yang akan diabaikan IE, tetapi browser lain akan menggunakannya. Saya sangat benci pengkodean yang menerapkan peretasan IE, tetapi yang ini sangat membantu. Ada kemungkinan bahwa ini hanya berfungsi dalam mode Quirks.
sumber
Pengguna Internet Explorer, Safari, Chrome dan Opera harus ingat untuk secara eksplisit mengatur nilai ketinggian baris di CSS. Saya membuat stylesheet yang menetapkan properit awal untuk semua kotak teks sebagai berikut.
sumber
Berikut adalah fungsi yang baru saja saya tulis di jQuery untuk melakukannya - Anda dapat memindahkannya ke Prototipe , tetapi mereka tidak mendukung "liveness" dari jQuery sehingga elemen yang ditambahkan oleh permintaan Ajax tidak akan merespons.
Versi ini tidak hanya meluas, tetapi juga menyusut saat delete atau backspace ditekan.
Versi ini mengandalkan jQuery 1.4.2.
Nikmati ;)
http://pastebin.com/SUKeBtnx
Pemakaian:
atau (pemilih jQuery apa pun misalnya)
Ini telah diuji di Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5, dan Chrome. Semuanya bekerja dengan baik.
sumber
Menggunakan ASP.NET, cukup lakukan ini:
sumber