ทำไม textarea จึงเต็มไปด้วยช่องว่างสีขาวลึกลับ?

ฉันมีพื้นที่ข้อความอย่างง่ายในรูปแบบเช่นนี้:

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

ฉันได้รับพื้นที่สีขาวเพิ่มเติมในtextareaนี้ เมื่อฉันแท็บเคอร์เซอร์ของฉันเป็นเหมือนกลางtextareaและไม่ได้อยู่ในจุดเริ่มต้น? คำอธิบายคืออะไร

ดูรหัสของคุณอย่างใกล้ชิด </textarea>ในนั้นมีอยู่แล้วสามบรรทัดและตันของพื้นที่สีขาวก่อน ลบสิ่งเหล่านั้นออกก่อนเพื่อไม่ให้มีตัวแบ่งบรรทัดระหว่างแท็กอีกต่อไป มันอาจทำเคล็ดลับแล้ว

ทุกอย่างระหว่าง <textarea>และ</textarea>ถูกใช้เป็นค่าเริ่มต้นสำหรับกล่องข้อความของคุณ มีตัวอย่างของพื้นที่ว่างในตัวอย่างของคุณ พยายามกำจัดสิ่งเหล่านั้นทั้งหมด

เปิด (และปิด!) แท็ก PHP ของคุณทันทีและก่อนหน้าtextareaแท็กของคุณ:

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

กล่าวโดยย่อ: <textarea>ควรปิดทันทีในบรรทัดเดียวกับที่เริ่ม

การปฏิบัติทั่วไป:สิ่งนี้จะเพิ่มตัวแบ่งบรรทัดและช่องว่างที่ใช้สำหรับการเยื้องในโค้ด

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

การปฏิบัติที่ถูกต้อง

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

โดยทั่วไปควรจะเป็น

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

หากมีช่องว่างที่กำหนดไว้ล่วงหน้าให้บอกว่าเนื่องจากการจัดรูปแบบรหัสด้านล่าง

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

ช่องว่างที่แสดงโดยจุดยังคงเพิ่มในแต่ละการส่ง

ช่องว่างใด ๆ ระหว่างการเปิดและปิดแท็ก textarea จะถูกพิจารณาว่าเป็นช่องว่าง ดังนั้นสำหรับโค้ดด้านบนของคุณวิธีที่ถูกต้องจะเป็น:

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

การทำงานอื่น ๆ ก็คือการใช้จาวาสคริปต์:

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

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

นี่คือสิ่งที่ฉันทำ การลบช่องว่างสีขาวและตัวแบ่งบรรทัดในรหัสทำให้บรรทัดยาวเกินไป

ในการทำให้มันดูสะอาดขึ้นลองใช้ตัวดำเนินการที่ประกอบไปด้วย:

<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> 

การย้าย ... > ลงสำหรับฉัน

ฉันมีปัญหาเดียวกันและวิธีแก้ปัญหานั้นง่ายมาก: อย่าเพิ่งเริ่มบรรทัดใหม่! แม้ว่าคำตอบก่อนหน้าบางคำสามารถแก้ปัญหาได้ แต่ความคิดนั้นไม่ได้ระบุไว้อย่างชัดเจน เข้าใจสิ่งที่สำคัญคือการกำจัดช่องว่างที่ไม่ได้ตั้งใจไม่เคยเริ่มต้นบรรทัดใหม่หลังแท็กเริ่มต้นของคุณ

วิธีต่อไปนี้คือผิดและจะทำให้มีช่องว่างที่ไม่ต้องการจำนวนมากก่อนเนื้อหาข้อความของคุณ:

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

วิธีที่ถูกต้องที่จะทำคือ:

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

โปรดตรวจสอบให้แน่ใจว่าไม่มีการหยุดหรือการเว้นวรรคหลังจากนั้นเพื่อให้แน่ใจว่าไม่มีช่องว่างหรือแท็บเพียงแค่คัดลอกและวางรหัสนี้ :) ฉันได้แก้ไขให้คุณ

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

นอกจากนี้: แท็ก textarea แสดงช่องว่างสำหรับบรรทัดใหม่แท็บ ฯลฯ ในรหัสหลายบรรทัด

เก็บรหัส textarea โดยไม่มีช่องว่างสีขาวเพิ่มเติมภายใน

ยิ่งไปกว่านั้นถ้าคุณเห็นบรรทัดว่างเพิ่มเติมมีวิธีแก้ปัญหาในภาษาเมตา

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

มันจะพิมพ์บรรทัดโดยไม่ต้องเพิ่มบรรทัดว่างแน่นอนขึ้นอยู่กับว่าบรรทัดของคุณลงท้ายด้วย '\ n', '\ r \ n' หรือ '' - โปรดปรับ

พื้นที่ข้อความแสดงช่องว่างที่ลึกลับเพราะมีพื้นที่จริงอยู่ในแท็ก <textarea> <php? echo $var; ?> </textarea> หลังจากลบช่องว่างพิเศษเหล่านี้ระหว่างแท็กจะแก้ปัญหาดังต่อไปนี้ <textarea><php? echo $var; ?></textarea>

ทางออกหนึ่งที่ได้ผลสำหรับฉันคือการเพิ่มสไตล์white-space: normal;ให้กับ textarea เพราะบางครั้งมันเป็นไปไม่ได้ที่จะกำจัดช่องว่างทั้งหมด (ตัวอย่างเช่นเมื่อคุณต้องการให้โค้ดของคุณปฏิบัติตามแนวทางการเข้ารหัสซึ่งต้องเพิ่มแท็บช่องว่างและตัวแบ่งบรรทัด)

โปรดทราบว่าค่าเริ่มต้นสำหรับ textarea อย่างน้อยใน chrome คือ: white-space: pre-wrap;

หากคุณยังคงต้องการใช้การเยื้องให้ทำหลังจากเปิด<?phpแท็กดังนี้:

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

ฉันรู้ว่ามันสาย แต่อาจช่วยเหลือผู้อื่น

ใช้สิ่งนี้ในเมื่อจำเป็นต้องมีการเยื้องเอกสาร

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

คำถามเดียวกัน

ฉันเทียบกับโค้ด HTML ผสมกับโค้ด PHP

อย่างไรก็ตามลองทำสิ่งนี้:

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

เพียงกำหนดแท็กปิดของคุณในบรรทัดเดียวกัน

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

นอกจากนี้เมื่อคุณบอกว่าเคอร์เซอร์อยู่ใน "กึ่งกลาง" ของ textarea มันทำให้ฉันคิดว่าคุณอาจมีช่องว่างภายในเพิ่มเติมหรือจัดแนวข้อความ: กึ่งกลางกำหนดไว้ที่ไหนสักแห่งใน CSS ของคุณ

ตรวจสอบให้แน่ใจก่อนว่า $ siteLink_val ของคุณไม่คืนค่า white space เป็นค่า อิลิเมนต์ <textarea> โดยค่าเริ่มต้นมีค่าว่างดังนั้นหากตัวแปรที่คุณก้องด้วยเหตุผลบางอย่างมีช่องว่างปัญหาของคุณก็จะหมดไปทันที

เพื่อให้โค้ดสะอาดที่สุดฉันขอแนะนำให้คุณทำสิ่งนี้เพื่อให้มีความยืดหยุ่นมากขึ้นในภายหลัง ฉันได้สร้างฟังก์ชั่นที่ส่งกลับค่า NULL หากตัวแปรนั้นไม่มีอยู่ (สิ่งที่คุณดูเหมือนจะเล็งไปที่โพสต์ต้นฉบับ) และค่าสัมบูรณ์ เมื่อคุณแน่ใจในเนื้อหาตัวแปรแล้วให้ลองทำดังนี้:

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

และรหัสต่อไปนี้ใน textarea ของคุณจะอ่าน:

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

นี่คือการสมมติว่าการติดตั้ง PHP ของคุณได้รับการกำหนดค่าสำหรับการโทรแบบแปรผันทางสั้นตามที่เห็นในแท็ก "<? =?>" ที่ย่อลง หากคุณไม่สามารถใช้วิธีนี้ได้โปรดอย่าลืมนำโค้ด PHP ของคุณด้วย "<? php" และปิดด้วย "?>"

หลีกเลี่ยงการขึ้นบรรทัดใหม่ระหว่าง <textarea> เพราะสามารถสร้างศักยภาพของอักขระที่ผิดพลาดได้

ตรวจสอบ CSS ของคุณเพื่อให้แน่ใจว่าไม่มีกฎการเว้นระยะในการพุชข้อความเข้าด้านใน

นอกจากนี้คุณระบุค่า cols และแถวบน textarea จากนั้นกำหนดสไตล์ความกว้างและความสูง กฎเหล่านี้มีผลต่อต้านและจะส่งผลให้เกิดภาพที่ไม่สอดคล้องกัน ติดกับการกำหนดขนาดผ่านสไตล์ (ฉันขอแนะนำให้องค์ประกอบชั้นเรียน) หรือแถว / cols