HTML <textarea>에 기본값을 추가하는 방법은 무엇입니까? [닫은]

349

내 HTML의 기본값을 설정하고 싶습니다 <textarea>. 나는 당신이 같은 것을해야 기본값을 추가 자료에서 읽었습니다 <textarea>This is default text</textarea>. 나는 그것을했지만 작동하지 않습니다. 옳은 일이 무엇입니까?

html textarea

— 초보자 코더
소스

1

당신이 보여주는 방법은 그것이 작동하는 방식입니다. 그렇지 않은 경우 HTML 코드 표시

— Pekka

당신의 HTML을 보여주세요 ...

— Daniel Ramirez-Escudero

1

코드 시도가 없는 질문에 대한 답변 모음 . 이 시도없이 질문을 처리 할 수 있으므로 질문이 "코드 없음"또는 "더 이상 재생산 될 수 없음"의 근접한 이유가되지 않습니다.

— Tsyvarev

620

여기 내 jsFiddle 예제가 있습니다. 이것은 잘 작동합니다 :

<textarea name='awesome'>Default value</textarea>

— 앤드류 잭맨
소스

93

자리 표시 자 속성을 사용할 수 있습니다.이 속성 은 기본값을 추가하지 않지만 원하는 값 이 될 수 있습니다.

<textarea placeholder="this text will show in the textarea"></textarea>

여기에서 확인하십시오 -http : //jsfiddle.net/8DzCE/949/

중요 사항 (주석에서 Jon Brave가 제안한대로) :

자리 표시 자 특성은 텍스트 영역의 값을 설정하지 않습니다. 대신 "자리 표시 자 특성은 컨트롤에 값이 없을 때 사용자가 데이터를 입력 할 수 있도록하는 짧은 힌트 (단어 또는 짧은 문구)를 나타냅니다"(사용자가 텍스트 영역을 클릭하자마자 사라짐). 컨트롤의 "기본값"으로 작동하지 않습니다. 원하는 경우 여기에 다른 답변에 따라 여기에 실제 기본값이 있습니다.

— bhavya_w
소스

14

당신은 명확하게해야한다 placeholder설정된하지 않는 값 (A)의을 textarea. 대신 "자리 표시 자 특성은 컨트롤에 값이 없을 때 사용자가 데이터를 입력 할 수 있도록하는 짧은 힌트 (단어 또는 짧은 문구)를 나타냅니다"(사용자가 텍스트 영역을 클릭하자마자 사라짐). 컨트롤의 "기본값"으로 작동하지 않습니다. 원하는 경우 <textarea>Here is the actual default value</textarea>여기에 다른 답변 에 따라 원하는 텍스트를 안에 넣어야합니다 .

— JonBrave

10

이것은 실제로 매우 위험한 솔루션입니다. 자리 표시자를 기본값과 혼동하지 마십시오.

— Qwerty

@Qwerty-예, 자리 표시 자와 기본값을 혼동해서는 안됩니다. 그러나 위험합니다 .... 어떻게 그리고 어디에서 위험 할 수 있는지 (해를 입힐 수있는 또는 가능한 예) 사례를 제시 할 수 있습니까?

— bhavya_w

1

자리 표시자는 양식을 보내지 않습니다. 당신이나 당신의 사용자가 보내려고하면 위험합니다.

— Qwerty

2

값이 제출되지 않으면 기본값이 아니라 힌트입니다. 기본값을 찾고 있다면 기본값으로 작동 할 것으로 예상되며 위험한 것은 이것이 예상되는 동작을 나타내지 않는다는 사실입니다. 위험한 것은이 솔루션이 요청한 것을 해결할 것이라고 가정하는 것입니다. 그러나 실제로 A를 찾고 있지만 B를 요구 한다고 가정하는 것이 맞습니다 . 그리고 당신이 당신의 대답에 암시 적으로 진술한다면, 당신의 대답은 정당 할 것입니다. 이것이 지식 부족에 관한 것이 옳지 만,이 답변을 찾는 사람들에게는이 지식이 부족합니다.

— Qwerty

20

데이터베이스에서 정보를 편집하기 위해 textarea 태그로 가져 오려면 입력 태그는 여러 행을 차지하는 데이터를 표시하지 않습니다. 행 이 작동하지 않음, 태그 입력은 한 행입니다.

<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->

textarea 태그에는 값 이 없지만 핸들 막대에서 잘 작동합니다.

<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>

— 사용자 2519992
소스

9

프로젝트에서 Angular.js 를 사용 하고 있고 (있는 그대로)에 ng-model대한 <textarea>설정이있는 경우 기본값을 다음과 같이 설정하십시오.

<textarea ng-model='foo'>Some default value</textarea>

...작동 안 할 것이다!

ng-model해당 컨트롤러에서 텍스트 영역으로 기본값을 설정하거나을 사용해야 ng-init합니다.

예 1 (사용 ng-init) :

코드 스 니펫 표시

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  // your controller implementation here
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
    </div>
  </body>
</html>

스 니펫 확장

예 2 (을 사용하지 않고 ng-init) :

코드 스 니펫 표시

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  $scope.foo = 'Some default value';
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-model='foo'></textarea>
    </div>
  </body>
</html>

스 니펫 확장

— 라훌 데 사이
소스

1

Ay는이 stackoverflow.com/a/25391822/2199525를 발견하여 더욱 명확 해졌습니다.

— leymannx

7

몇 가지 메모와 설명 :

placeholder='' 텍스트를 삽입하지만 회색으로 표시되고 (툴팁 스타일 형식으로) 필드를 클릭하는 순간 텍스트가 빈 텍스트 필드로 바뀝니다.
value=''는 <textarea>속성 이 아니며 <input>태그 (예 : <input type='text'>등) 에서만 작동합니다 . HTML5 제작자가 왜이를 통합하지 않기로 결정했는지 모르겠지만, 지금은 그런 식입니다.
<textarea>요소 에 텍스트를 삽입하는 가장 좋은 방법은 여기에 다음과 같이 올바르게 설명되어 있습니다. <textarea> Desired text to be inserted into the field upon page load </textarea>사용자가 필드를 클릭하면 텍스트를 편집 할 수 있으며 필드에 남아 있습니다 (placeholder='' ).
참고 : <textarea>및 </textarea>태그 사이에 텍스트를 삽입하면 삽입 한 텍스트 placeholder=''로 덮어 쓰므로 사용할 수 없습니다 .

— twknab
소스

6

내가 이와 같은 일을 할 때 그것은 나를 위해 일했다 :

<textarea name="test" rows="4" cols="6">My Text</textarea>

— 아룬 라즈
소스

4

또한 이것은 저에게 매우 효과적이었습니다.

<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>

이 경우 $ _POST [ 'encode']는 다음과 같습니다.

<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">

PHP 코드는와 태그 사이에 삽입되었습니다.

— Winthropite
소스

3

자리 표시자는 텍스트 영역의 기본값을 설정할 수 없습니다. 당신이 사용할 수있는

<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>

데이터베이스 연결에 태그를 사용하는 경우이 태그입니다. php 이외의 다른 언어를 사용하는 경우 다른 구문을 사용할 수 있습니다.

예 :

<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>

필수 명령은 PHP를 사용하여 빈 필드를 확인하는 데 필요한 노력을 최소화합니다.

— AA
소스

1

this.innerHTML을 사용할 수 있습니다.

<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>

스 니펫 확장

텍스트 영역에 초점을 맞추면 기본적으로 텍스트 영역의 innerHTML이 빈 문자열이됩니다.

— 스트 라드
소스

-1

텍스트 영역을 변경 한 경우 렌더링 후 텍스트 영역을 변경하십시오. 초기화 된 값 대신 업데이트 된 값을 얻습니다.

<!doctype html>
<html lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(function () {
                $('#btnShow').click(function () {
                    alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
                });
            });
            function updateAddress() {
                $('#addressFieldName').val('District: Peshawar \n');
            }
        </script>
    </head>
    <body>
        <?php
        $address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
        ?>
        <textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
        <?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
        <input type="button" id="btnShow" value='show' />
    </body>
</html>

보시다시피 textarea의 가치는 textarea의 시작 태그와 닫는 태그 사이의 텍스트와 다릅니다.

— 아델 라자 아제 에미
소스

-5

"value"속성을 추가하고 다음과 같이 설정할 수도 있습니다.


<textarea value="your value"> </textarea>

— 괴물
소스

1

로부터 MDN 문서 : " <textarea>지원하지 않는 value속성을".

— 로비 코넬리 센

React로 작성하면 HTML 사양과 일치해야합니다.

— Tomasz Waszczyk