Mengapa textarea dipenuhi dengan ruang putih misterius?


292

Saya memiliki area teks sederhana dalam bentuk seperti ini:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink">
    <?php if($siteLink_val) echo $siteLink_val; ?> 
</textarea>

Saya terus mendapatkan ruang putih ekstra di teks ini . Ketika saya tab ke dalamnya kursor saya seperti di tengah textarea dan bukan di awal? Apa penjelasannya?

Jawaban:


485

Perhatikan baik-baik kode Anda. Di dalamnya, sudah ada tiga garis putus, dan satu ton ruang putih sebelumnya </textarea>. Hapus yang pertama sehingga tidak ada jeda baris di antara tag lagi. Mungkin sudah melakukan trik.


4
@ user79685 sama-sama Baca komentar baru saya di atas, saya tidak benar-benar mengejek Anda. Setidaknya tidak dengan cara yang kejam :)
Pekka

9
Mmm, saya tidak setuju dengan itu. Saya sangat bijak dan etiket dalam diskusi online, dan saya menikmati keseluruhan nada bersahabat pada SO. Di sisi lain, orang perlu mengembangkan sedikit kulit ketika bergerak di internet, itu benar.
Pekka

2
sangat bagus. Saya menghadapi masalah ini juga dan mencoba setiap trik lain dari memangkas teks untuk menerapkan properti 'indeks teks' (menggunakan css) :-D :-D. (betapa bodohnya aku). Terjadi masalah karena saya membuat indentasi kode dalam html: -? ... Terima kasih, jawaban Anda membantu saya juga .. :-)
Gaurav Sharma

3
Juga, gunakan valueatribut alih-alih menambahkan teks di dalam tag.
João Cunha

2
Seorang oldie tapi seorang goodie. Ini membantu saya keluar hari ini. @Pekka kamu luar biasa!
wordman

73

Nah, semuanya antara <textarea>dan </textarea>digunakan sebagai nilai default untuk kotak teks Anda. Ada beberapa spasi putih dalam contoh Anda di sana. Cobalah untuk menghilangkan semua itu.


4
Terima kasih banyak. Saya tidak menyadari bahwa semuanya adalah default. Saya memilih orang di atas karena dia menjawabnya terlebih dahulu meskipun dia mencemooh saya. Terima kasih telah berteman dengan orang-orang.
Afamee

2
Itu mudah. Terima kasih banyak!
Sergio Belevskij

56

Buka (dan tutup!) Tag PHP Anda tepat setelah, dan sebelumnya, textareatag Anda :

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php
  if($siteLink_val) echo $siteLink_val;
?></textarea>

4
ini cara cerdas untuk menjaga lekukan dalam kasus ini. Terima kasih!
Sebastianb

Ini akhirnya memperbaiki masalah saya. Terima kasih banyak Bart
Stephen Kennedy

32

Singkatnya: <textarea>harus segera ditutup pada baris yang sama di mana ia dimulai.


Praktek Umum: ini akan menambah line-break dan ruang yang digunakan untuk lekukan dalam kode.

<textarea id="sitelink" name="sitelink">
</textarea>

Praktek yang Benar

<textarea id="sitelink" name="sitelink"></textarea>

Memecahkan masalah saya.
S.M_Emamian

Ini adalah solusi sempurna bagi saya juga
Sheldon R.

Memecahkan masalah saya, solusi hebat. Terima kasih
Husnain Shabbir

26

Pada dasarnya seharusnya begitu

<textarea>something here with no spaces in the begining</textarea>

Jika ada beberapa ruang yang telah ditentukan katakanlah karena pemformatan kode seperti di bawah ini

<textarea>.......
....some_variable
</textarea>

Ruang yang ditunjukkan oleh titik terus bertambah pada setiap pengiriman.


Ini adalah "trik" lama, bahkan terkadang dilupakan. Kami sudah memiliki masalah HTML berdasarkan ini akan kembali ke IE6 / 7 .. +1
JonSnow

Menyelamatkan hariku. Terima kasih!
Reuel Ribeiro

Ini berfungsi dengan baik, tapi itu benar-benar lucu. Adakah penjelasan tentang bug aneh ini?
Aminu Kano

11

Setiap ruang di antara textarea tag pembuka dan penutup akan dianggap sebagai spasi. Jadi untuk kode Anda di atas, cara yang benar adalah:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php if($siteLink_val) echo $siteLink_val; ?></textarea>

7

Pekerjaan lain di sekitar adalah menggunakan javascript:

//jquery
$('textarea#someid').html($('textarea#someid').html().trim());

//without jquery
document.getElementById('someid').innerHTML = document.getElementById('someid').innerHTML.trim();

Inilah yang saya lakukan. Menghapus spasi putih dan jeda baris dalam kode membuat garis terlalu panjang.


5

Agar terlihat lebih bersih, pertimbangkan untuk menggunakan operator ternary:

<textarea><?=( $siteLink_val ? $siteLink_val : '' );?></textarea>

2
Jangan gunakan tag pendek, jangan menyarankan orang lain untuk melakukannya. Ini akan membantu orang menghindari PITA saat meletakkan beberapa webapp di server produksi dengan konfigurasi yang berbeda. Terima kasih.
Alfabravo

4
Saya selalu menggunakan tag pendek dalam skenario templating tepat karena saya ingin lebih banyak orang menggunakannya, dan dengan demikian mendorong komunitas PHP untuk terus mendukung mereka. Yang mengatakan, tag pendek HANYA harus digunakan dalam skenario templating, TIDAK PERNAH dalam logika aplikasi, dan cukup jelas, HANYA ketika server mendukungnya. Selalu tahu lingkungan produksi Anda sebelum digunakan. (Tentu saja, ini bukan tempat untuk membahas pro dan kontra tag pendek, tetapi Anda mengemukakannya, jadi itu pembenaran saya.)
Brian Lacy

4
<textarea style="width:350px; 
 height:80px;" cols="42" rows="5" name="sitelink"
 ><?php if($siteLink_val) echo $siteLink_val; ?></textarea> 

Bergerak ...> turun bekerja untukku.


4

Saya mendapat masalah yang sama, dan solusinya sangat sederhana: jangan memulai baris baru! Meskipun beberapa jawaban sebelumnya dapat menyelesaikan masalah, ide tersebut tidak dinyatakan dengan jelas. The pemahaman penting, untuk menyingkirkan ruang yang tidak diinginkan, tidak pernah memulai baris baru setelah tag awal Anda.

Cara berikut ini SALAH dan akan meninggalkan banyak ruang yang tidak diinginkan sebelum konten teks Anda:

 <textarea>
    text content // start with a new line will leave a lot of unwanted spaces
 </textarea>

CARA YANG BENAR untuk melakukannya adalah:

 <textarea>text content //put text content right after your start tag, no new line
 </textarea>

3

Pastikan tidak ada linebreak atau spasi setelahnya, untuk memastikan tidak ada spasi atau tab, cukup salin dan tempel kode ini :) Saya telah memperbaikinya untuk Anda

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php if($siteLink_val) echo trim($siteLink_val);?></textarea>

2

Selanjutnya: tag textarea menunjukkan spasi untuk baris baru, tab, dll, dalam kode multiline.


2

simpan kode teks tanpa spasi putih di dalamnya

apalagi jika Anda melihat baris kosong tambahan ada solusi dalam bahasa meta:

<textarea>
for line in lines:
echo line.replace('\n','\r')
endfor
</textarea>

itu akan mencetak baris tanpa baris kosong tambahan tentu saja itu tergantung jika baris Anda diakhiri dengan '\ n', '\ r \ n' atau '' - mohon adaptasi


2

Area teks menunjukkan ruang misterius karena ada ruang nyata di dalam tag. <textarea> <php? echo $var; ?> </textarea> setelah menghapus ruang ekstra ini di antara tag akan menyelesaikan masalah, sebagai berikut. <textarea><php? echo $var; ?></textarea>


2

Salah satu solusi yang berhasil bagi saya adalah menambahkan gaya white-space: normal;ke textarea karena kadang-kadang tidak layak untuk menghilangkan semua spasi putih (misalnya ketika Anda ingin kode Anda mematuhi pedoman pengkodean Anda yang membutuhkan penambahan tab, spasi putih dan jeda baris)

Harap perhatikan bahwa default untuk textarea, setidaknya di chrome adalah: white-space: pre-wrap;


2

Jika Anda masih suka menggunakan indentasi, lakukan setelah membuka <?phptag, seperti:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php // <--- newline
    if($siteLink_val) echo $siteLink_val; // <--- indented, newline
?></textarea>

2

Saya tahu ini terlambat tetapi dapat membantu orang lain.

gunakan ini ketika lekukan dokumen diperlukan.

$('document').ready(function()
{
    $('textarea').each(function(){
            $(this).val($(this).val().trim());
        }
    );
});

pertanyaan yang sama


Atau Anda dapat memformat html Anda dengan benar. Tapi saya setuju itu bisa menjadi sesuatu yang sulit jika Anda menginginkan sesuatu seperti kode php di dalamnya. Jadi saya setuju dengan jawaban Anda.
Niels Lucas

1

Saya menentang kode HTML yang dicampur dengan kode PHP.

Namun coba ini:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink">
<?php 
    if($siteLink_val) 
        echo trim($siteLink_val);
?> 
</textarea>

3
Hampir ... itu masih termasuk dua baris baru.
amarillion

Harus menggunakan <textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php dan ?></textarea>memastikan bahwa itu benar-benar murni. Juga, boleh saya bertanya mengapa Anda menentang HTML dengan PHP?
FluorescentGreen5

1

Cukup tentukan tag dekat Anda dan Anda di baris yang sama.

<textarea class="form-control"
          id="newText"
          rows="6"
          placeholder="Your placeholder here..."
          required
          name="newText"></textarea>

0

Juga, ketika Anda mengatakan bahwa kursor berada di "tengah" dari textarea, itu membuat saya berpikir Anda juga bisa memiliki padding tambahan atau text-align: center yang didefinisikan di suatu tempat di CSS Anda.


0

Pastikan dulu bahwa $ siteLink_val Anda tidak mengembalikan spasi sebagai nilai. Elemen <textarea> secara default memiliki nilai kosong jadi jika variabel yang Anda gema karena beberapa alasan memiliki spasi, ada masalah Anda saat itu juga.

Untuk membuat kode ini terbersih mutlak, saya sarankan Anda dapat melakukan sesuatu seperti ini, memungkinkan untuk lebih banyak fleksibilitas nanti. Saya telah membuat fungsi yang mengembalikan NULL jika variabel tidak ada (apa yang ingin Anda tuju di posting asli) dan nilai absolut sebaliknya. Setelah Anda memastikan konten variabel Anda, coba ini:

function build_siteLink_val() {
     if ( $siteLink_val ) {
          return $siteLink_val;
     }

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

Dan kode berikut dalam textarea Anda sekarang akan dibaca:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?=$output_siteLink_val?></textarea>

Ini dengan asumsi instalasi PHP Anda dikonfigurasikan untuk panggilan variabel tangan pendek, seperti yang terlihat pada tag "<? =?>" Yang dipersingkat. Jika Anda tidak dapat menampilkan cara ini, ingatlah untuk mengawali kode PHP Anda dengan "<? Php" dan tutup dengan "?>".

Hindari jeda baris antara <textarea> karena dapat membuat potensi karakter yang salah.

Juga, periksa CSS Anda untuk memastikan tidak ada aturan padding yang mendorong teks ke dalam.

Juga, Anda menentukan nilai cols dan rows pada textarea, dan kemudian gaya lebar dan tinggi. Aturan-aturan ini kontraproduktif, dan akan menghasilkan visual yang tidak konsisten. Tetap dengan mendefinisikan ukuran melalui gaya (saya sarankan memberikan elemen kelas) atau baris / cols.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.