Mengapa textarea dipenuhi dengan ruang putih misterius?

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?

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.

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.

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>

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>

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.

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>

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.

Agar terlihat lebih bersih, pertimbangkan untuk menggunakan operator ternary:

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

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

Bergerak ...> turun bekerja untukku.

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>

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>

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

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

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>

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;

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>

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

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>

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>

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.

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.