Como adicionar valor padrão para o html <textarea>? [fechadas]

349

Eu quero definir um valor padrão para o meu html <textarea>. Eu li de um material que, para adicionar valor padrão, você precisa fazer algo parecido <textarea>This is default text</textarea>. Eu fiz isso, mas não funciona. Qual é a coisa certa a fazer?

html textarea

— Newbie Coder
fonte

11

A maneira como você mostra é como deve funcionar. Mostre seu código HTML se isso não acontecer

— Pekka

mostrar o seu html por favor ...

— Daniel Ramirez-Escudero

11

O conjunto de respostas para a pergunta sem a tentativa de código mencionada. Vamos tratar a questão sem essa tentativa, para que a questão não seja sujeita a "nenhum código" ou "possa mais ser reproduzida" por razões íntimas.

— Tsyvarev 29/09/19

620

Aqui está o meu exemplo do jsFiddle . isso funciona bem:

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

— Andrew Jackman
fonte

93

Você pode usar o Atributo do espaço reservado , que não adiciona um valor padrão, mas pode ser o que você procura:

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

Confira aqui - http://jsfiddle.net/8DzCE/949/

Nota importante (como sugerido por Jon Brave nos comentários) :

O atributo Placeholder não define o valor de uma área de texto. Em vez disso "O atributo placeholder representa uma dica curta (uma palavra ou frase curta) destinada a auxiliar o usuário na entrada de dados quando o controle não tem valor" [e desaparece assim que o usuário clica na área de texto]. Ele nunca atuará como "o valor padrão" para o controle. Se você quiser isso, deve inserir o texto desejado dentro do valor padrão Aqui está o valor real, conforme outras respostas aqui

— bhavya_w
fonte

14

Você deve deixar claro que placeholdernão define o valor de a textarea. Em vez disso "O atributo placeholder representa uma dica curta (uma palavra ou frase curta) destinada a auxiliar o usuário na entrada de dados quando o controle não tem valor" [e desaparece assim que o usuário clica na área de texto]. Ele nunca atuará como "o valor padrão" para o controle. Se você quiser, deve colocar o texto desejado dentro do <textarea>Here is the actual default value</textarea>, conforme outras respostas aqui.

— JonBrave

10

Esta é realmente uma solução muito perigosa. Por favor, nunca confunda espaço reservado com valor padrão.

— Qwerty

@ Qwerty - Sim, não devemos confundir espaço reservado com o valor padrão. Mas perigoso .... Você pode indicar algum exemplo / caso onde e como ele pode ser perigoso (capaz ou provável de causar danos ou ferimentos)?

— precisa saber é

11

O espaço reservado não será enviado em um formulário. Isso é perigoso se você ou seu usuário espera que ele seja enviado.

— Qwerty

2

Se o valor não for enviado, não será um valor padrão, mas uma dica. Se estou procurando um valor padrão, espero que ele se comporte como um valor padrão e o que é perigoso é o fato de que isso não exibe o comportamento esperado. Perigoso é assumir que esta solução resolverá o que foi solicitado. Mas é correto para você assumir que eu realmente estou procurando Um , mas pedindo B . E se você declarar implicitamente que em sua resposta, sua resposta será legítima. Você está certo de que se trata de falta de conhecimento, mas as pessoas que procuram essa resposta não têm esse conhecimento.

— Qwerty

20

Se você deseja trazer informações de um banco de dados para uma tag de área de texto para edição: A tag de entrada não exibe dados que ocupam várias linhas: linhas não funcionam, a entrada da tag é uma linha.

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

A tag textarea não tem valor , mas funciona bem com o guidão

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

— user2519992
fonte

9

Apenas no caso, se você estiver usando o Angular.js no seu projeto (como eu sou) e tiver um ng-modelconjunto para o seu <textarea>, definindo o padrão por dentro como:

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

...não funciona!

Você precisa definir o valor padrão para as áreas de texto ng-modelno respectivo controlador ou uso ng-init.

Exemplo 1 (usando ng-init):

Mostrar snippet de código

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>

Expandir snippet

Exemplo 2 (sem usar ng-init):

Mostrar snippet de código

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>

Expandir snippet

— Rahul Desai
fonte

11

Ay achou esse stackoverflow.com/a/25391822/2199525 - tornou as coisas ainda mais claras.

— Leymannx #

7

Algumas notas e esclarecimentos:

placeholder='' insere o texto, mas está acinzentado (em um formato de dica de ferramenta) e, no momento em que o campo é clicado, o texto é substituído por um campo de texto vazio.
value=''não é um <textarea>atributo e funciona apenas para <input>tags, ou seja, <input type='text'>etc. Não sei por que os criadores do HTML5 decidiram não incorporar isso, mas é assim que é por enquanto.
O melhor método para inserir texto em <textarea>elementos foi descrito corretamente aqui como: <textarea> Desired text to be inserted into the field upon page load </textarea>Quando o usuário clica no campo, ele pode editar o texto e ele permanece no campo (ao contrário placeholder='').
Nota: Se você inserir texto entre as tags <textarea>e </textarea>, não poderá usá- placeholder=''lo, pois ele será substituído pelo texto inserido.

— twknab
fonte

6

Quando faço algo assim, funcionou para mim:

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

— Arun Raj
fonte

4

Além disso, isso funcionou muito bem para mim:

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

Nesse caso, $ _POST ['encode'] veio disso:

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

O código PHP foi inserido entre as tags e.

— winthropite
fonte

3

O espaço reservado não pode definir o valor padrão para a área de texto. Você pode usar

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

Essa é a tag se você a estiver usando para conexão com o banco de dados. Você pode usar sintaxe diferente se estiver usando outros idiomas além do php.

por exemplo:

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

O comando necessário minimiza os esforços necessários para verificar campos vazios usando php.

— AA
fonte

1

Você pode usar this.innerHTML.

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

Expandir snippet

Quando a área de texto é focada, basicamente torna o HTML interno do texto em uma string vazia.

— strahd
fonte

-1

Observe que, se você fez alterações na área de texto, após a renderização; Você receberá o valor atualizado em vez do valor inicializado.

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

Como você pode ver, o valor da área de texto será diferente do texto entre a tag de abertura e fechamento da área de texto de preocupação.

— Adeel Raza Azeemi
fonte

-5

Você também pode adicionar o atributo "value" e definir algo assim:


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

— monstro
fonte

11

Na documentação do MDN : " <textarea>não suporta o valueatributo".

— Robby Cornelissen

Escrevendo em React, vale a pena estar alinhado com as especificações HTML.

— Tomasz Waszczyk 15/11/19