Tại sao textarea chứa đầy khoảng trắng bí ẩn?

Tôi có một vùng văn bản đơn giản trong một hình thức như thế này:

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

Tôi tiếp tục nhận được thêm khoảng trắng trong textarea này . Khi tôi tab vào nó, con trỏ của tôi giống như ở giữa vùng văn bản và không phải lúc bắt đầu? Giải thích là gì?

Nhìn kỹ vào mã của bạn. Trong đó, đã có ba ngắt dòng và một tấn khoảng trắng trước đó </textarea>. Xóa những cái đầu tiên để không còn ngắt dòng giữa các thẻ nữa. Nó có thể đã thực hiện các mẹo.

Chà, mọi thứ giữa <textarea>và </textarea>được sử dụng làm giá trị mặc định cho hộp văn bản của bạn. Có một số khoảng trắng trong ví dụ của bạn ở đó. Hãy cố gắng loại bỏ tất cả những điều đó.

Mở (và đóng!) Các thẻ PHP của bạn ngay sau và trước các textareathẻ của bạn :

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

Tóm lại: <textarea>nên được đóng ngay lập tức trên cùng một dòng nơi nó bắt đầu.

Thực hành chung: điều này sẽ thêm các ngắt dòng và khoảng trắng được sử dụng để thụt lề trong mã.

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

Thực hành đúng

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

Về cơ bản nó nên

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

Nếu có một số khoảng trắng được xác định trước, hãy nói do định dạng mã như bên dưới

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

Các khoảng trắng được hiển thị bằng dấu chấm tiếp tục thêm vào mỗi lần gửi.

Bất kỳ khoảng trống nào giữa các thẻ mở và đóng của textarea sẽ được coi là khoảng trắng. Vì vậy, đối với mã trên của bạn, cách chính xác sẽ là:

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

Một công việc khác sẽ là sử dụng javascript:

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

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

Đây là những gì tôi đã làm. Loại bỏ khoảng trắng và ngắt dòng trong mã làm cho dòng quá dài.

Để làm cho nó trông gọn gàng hơn một chút, hãy xem xét sử dụng toán tử 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> 

Di chuyển ...> xuống làm việc cho tôi.

Tôi có cùng một vấn đề và giải pháp rất đơn giản: đừng bắt đầu một dòng mới! Mặc dù một số câu trả lời trước có thể giải quyết vấn đề, ý tưởng không được nêu rõ ràng. Các sự hiểu biết quan trọng là, để thoát khỏi những không gian ngoài ý muốn, không bao giờ bắt đầu một dòng mới ngay sau khi bắt đầu từ khóa của bạn.

Cách sau đây là SAI và sẽ để lại nhiều khoảng trống không mong muốn trước nội dung văn bản của bạn:

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

CÁCH QUYỀN để làm điều đó là:

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

Vui lòng đảm bảo không có ngắt dòng hoặc dấu cách sau, để đảm bảo không có khoảng trắng hoặc tab, chỉ cần sao chép và dán mã này :) Tôi đã sửa nó cho bạn

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

Hơn nữa: thẻ textarea hiển thị khoảng trắng cho các dòng, tab mới, v.v., trong mã đa dòng.

giữ mã textarea không có khoảng trắng bên trong

hơn nữa, nếu bạn thấy các dòng trống bổ sung, có giải pháp trong ngôn ngữ meta:

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

tất nhiên nó sẽ in các dòng mà không cần thêm các dòng trống, điều này phụ thuộc vào việc các dòng của bạn kết thúc bằng '\ n', '\ r \ n' hay '' - vui lòng điều chỉnh

Vùng văn bản hiển thị các không gian bí ẩn vì có một không gian thực tồn tại trong các thẻ. <textarea> <php? echo $var; ?> </textarea> sau khi loại bỏ các khoảng trắng thừa giữa các thẻ sẽ giải quyết vấn đề, như sau. <textarea><php? echo $var; ?></textarea>

Một giải pháp hiệu quả với tôi là thêm kiểu white-space: normal;vào textarea vì đôi khi không thể loại bỏ tất cả khoảng trắng (ví dụ: khi bạn muốn mã của mình tuân theo các nguyên tắc mã hóa của bạn, yêu cầu thêm tab, khoảng trắng và ngắt dòng)

Xin lưu ý rằng mặc định cho textarea, ít nhất là trong chrome là: white-space: pre-wrap;

Nếu bạn vẫn thích sử dụng thụt lề, hãy thực hiện sau khi mở <?phpthẻ, như vậy:

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

Tôi biết muộn nhưng có thể giúp đỡ người khác.

sử dụng điều này khi thụt tài liệu được yêu cầu.

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

cùng một câu hỏi

Tôi chống lại mã HTML trộn lẫn với mã PHP.

Tuy nhiên hãy thử điều này:

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

Chỉ cần xác định thẻ của bạn và đóng trong cùng một dòng.

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

Ngoài ra, khi bạn nói rằng con trỏ nằm ở "giữa" của textarea, điều đó khiến tôi nghĩ rằng bạn cũng có thể có thêm phần đệm hoặc text-align: centre được xác định ở đâu đó trong CSS của bạn.

Trước tiên, hãy đảm bảo rằng $ siteLink_val của bạn không trả về khoảng trắng dưới dạng giá trị. Phần tử <textarea> theo mặc định có một giá trị trống, vì vậy nếu biến bạn đang lặp lại vì một lý do nào đó có khoảng trắng, thì vấn đề của bạn sẽ ngay lập tức.

Để làm cho mã sạch nhất tuyệt đối, tôi sẽ đề nghị bạn có thể làm một cái gì đó như thế này, cho phép linh hoạt hơn sau này. Tôi đã tạo một hàm trả về NULL nếu biến không xuất hiện (điều mà bạn dường như đang nhắm đến trong bài viết gốc) và giá trị tuyệt đối khác. Khi bạn đã chắc chắn về nội dung của biến, hãy thử điều này:

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

Và đoạn mã sau trong textarea của bạn bây giờ sẽ đọc:

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

Điều này giả sử cài đặt PHP của bạn được cấu hình cho các cuộc gọi biến ngắn, như được thấy trong các thẻ "<? =?>" Rút gọn. Nếu bạn không thể xuất ra theo cách này, hãy nhớ mở đầu mã PHP của bạn bằng "<? Php" và đóng bằng "?>".

Tránh ngắt dòng giữa <textarea> vì nó có thể tạo ra tiềm năng của các ký tự sai.

Ngoài ra, hãy kiểm tra CSS của bạn để đảm bảo không có quy tắc đệm đẩy văn bản vào trong.

Ngoài ra, bạn chỉ định giá trị cols và hàng trên textarea, sau đó định kiểu chiều rộng và chiều cao. Các quy tắc này là phản tác dụng, và sẽ dẫn đến hình ảnh không nhất quán. Tiếp tục xác định kích thước thông qua kiểu (tôi khuyên bạn nên cung cấp cho phần tử một lớp) hoặc các hàng / cols.