왜 텍스트 영역에 신비한 공백이 가득합니까?

다음 과 같은 형식 의 간단한 텍스트 영역 이 있습니다.

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

또 다른 해결 방법은 javascript를 사용하는 것입니다.

//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>
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;은 때로는 모든 공백을 제거하는 것이 불가능하기 때문에 텍스트 영역에 스타일 을 추가하는 것입니다 (예 : 코드가 탭, 공백 및 줄 바꿈을 추가 해야하는 코딩 지침을 준수하려는 경우)

크롬에서 텍스트 영역의 기본값은 다음과 같습니다. 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());
        }
    );
});

같은 질문

PHP 코드와 혼합 된 HTML 코드에 반대합니다.

그러나 이것을 시도하십시오 :

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

또한 커서가 텍스트 영역의 "중간"에 있다고 말하면 CSS의 어딘가에 추가 패딩이나 텍스트 정렬 : 센터 가있을 수 있다고 생각합니다 .

먼저 $ siteLink_val이 공백을 값으로 반환하지 않는지 확인하십시오. <textarea> 요소는 기본적으로 빈 값을 가지므로 어떤 이유로 에코하는 변수에 공백이 있으면 바로 문제가 있습니다.

코드를 가장 깨끗하게 만들기 위해 다음과 같이 할 수 있으므로 나중에 좀 더 융통성을 부여하는 것이 좋습니다. 변수가 존재하지 않으면 (원래 게시물에서 목표로하는 것으로 보이는 경우) NULL을 반환하고 그렇지 않으면 절대 값을 반환하는 함수를 만들었습니다. 변수의 내용을 확인한 후 다음을 시도하십시오.

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

이제 텍스트 영역의 다음 코드를 읽습니다.

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

단축 된 "<? =?>"태그에서 볼 수 있듯이 PHP 설치가 간단한 변수 호출을 위해 구성되었다고 가정합니다. 이 방법으로 출력 할 수 없으면 "<? php"로 PHP 코드를 시작하고 "?>"로 닫으십시오.

<textarea> 사이의 줄 바꿈은 잘못된 문자의 가능성을 만들 수 있으므로 피하십시오.

또한 CSS를 확인하여 텍스트를 안쪽으로 밀어 넣는 패딩 규칙이 없는지 확인하십시오.

또한 텍스트 영역에 열 및 행 값을 지정한 다음 너비와 높이의 스타일을 지정합니다. 이러한 규칙은 비생산적이며 일관성이없는 시각적 결과를 초래합니다. 스타일을 통해 크기를 정의하거나 (요소에 클래스를 제공하는 것이 좋습니다) 행 / 열을 고수하십시오.