¿Cómo agregar valor predeterminado para html <textarea>? [cerrado]

349

Quiero establecer un valor predeterminado para mi html <textarea>. Leí de un material que para agregar el valor predeterminado tienes que hacer algo como <textarea>This is default text</textarea>. Lo hice pero no funciona. ¿Qué es lo que hay que hacer?

html textarea

— Codificador novato
fuente

1

La forma en que se muestra es cómo se supone que debe funcionar. Muestre su código HTML si no es así

— Pekka

muestra tu html por favor ...

— Daniel Ramirez-Escudero

1

El conjunto de respuestas para la pregunta sin el intento de código indicado en él. Tratemos la pregunta sin este intento, por lo que la pregunta no se someterá a razones cercanas como "sin código" o "ya no se puede reproducir".

— Tsyvarev

620

Aquí está mi ejemplo de jsFiddle . esto funciona bien:

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

— Andrew Jackman
fuente

93

Puede usar el atributo de marcador de posición , que no agrega un valor predeterminado, pero podría ser lo que está buscando:

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

Compruébalo aquí: http://jsfiddle.net/8DzCE/949/

Nota importante (como lo sugirió Jon Brave en los comentarios) :

El atributo de marcador de posición no establece el valor de un área de texto. Más bien "El atributo de marcador de posición representa una pista breve (una palabra o frase corta) destinada a ayudar al usuario con la entrada de datos cuando el control no tiene valor" [y desaparece tan pronto como el usuario hace clic en el área de texto]. Nunca actuará como "el valor predeterminado" para el control. Si desea eso, debe poner el texto deseado dentro de Aquí está el valor predeterminado real, según otras respuestas aquí

— bhavya_w
fuente

14

Debe dejar en claro que placeholderno establece el valor de a textarea. Más bien "El atributo de marcador de posición representa una pista breve (una palabra o frase corta) destinada a ayudar al usuario con la entrada de datos cuando el control no tiene valor" [y desaparece tan pronto como el usuario hace clic en el área de texto]. Nunca actuará como "el valor predeterminado" para el control. Si desea eso, debe poner el texto deseado dentro de <textarea>Here is the actual default value</textarea>, como en otras respuestas aquí.

— JonBrave

10

Esta es realmente una solución muy peligrosa. Por favor, no confunda nunca el marcador de posición con el valor predeterminado.

— Qwerty

@Qwerty: Sí, no debemos confundir el marcador de posición con el valor predeterminado. Pero peligroso ... ¿Puede indicar algún ejemplo / caso dónde y cómo puede ser peligroso (capaz o probable de causar daños o lesiones)?

— bhavya_w

1

El marcador de posición no enviará un formulario. Eso es peligroso si usted o su usuario esperan que se envíe.

— Qwerty

2

Si el valor no se envía, no es un valor predeterminado, sino más bien una sugerencia. Si estoy buscando un valor predeterminado, espero que se comporte como un valor predeterminado y lo que es peligroso es el hecho de que no exhibe el comportamiento esperado. Es peligroso asumir que esta solución resolverá lo que se solicitó. Pero es correcta para que usted pueda asumir que de hecho estoy buscando una , pero pidiendo B . Y si declaras implícitamente que en tu respuesta, tu respuesta será legítima. Tiene razón en que se trata de falta de conocimiento, pero las personas que buscan esta respuesta carecen de este conocimiento.

— Qwerty

20

Si desea traer información de una base de datos a una etiqueta de área de texto para editarla: la etiqueta de entrada no muestra datos que ocupan varias líneas: las filas no funcionan, la entrada de etiqueta es una línea.

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

La etiqueta textarea no tiene valor , pero funciona bien con el manillar

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

— usuario2519992
fuente

9

En caso de que esté usando Angular.js en su proyecto (como yo) y tenga un ng-modelconjunto para usted <textarea>, establezca el valor predeterminado justo adentro como:

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

...¡no trabajará!

Debe establecer el valor predeterminado para el área de texto ng-modelen el controlador o uso respectivo ng-init.

Ejemplo 1 (usando ng-init):

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

Ejemplo 2 (sin usar ng-init):

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

— Rahul Desai
fuente

1

Ay descubrió que stackoverflow.com/a/25391822/2199525 hizo las cosas aún más claras.

— leymannx

7

Algunas notas y aclaraciones:

placeholder='' inserta su texto, pero está atenuado (en un formato de estilo de información sobre herramientas) y en el momento en que se hace clic en el campo, su texto se reemplaza por un campo de texto vacío.
value=''no es un <textarea>atributo y solo funciona para <input>etiquetas, es decir, <input type='text'>etc. No sé por qué los creadores de HTML5 decidieron no incorporarlo, pero así es por ahora.
El mejor método para insertar texto en <textarea>elementos se ha descrito correctamente aquí como: <textarea> Desired text to be inserted into the field upon page load </textarea>Cuando el usuario hace clic en el campo, puede editar el texto y permanece en el campo (a diferencia placeholder='').
Nota: Si inserta texto entre las etiquetas <textarea>y </textarea>, no puede usarlo, placeholder=''ya que el texto insertado lo sobrescribirá.

— twknab
fuente

6

Cuando hago algo como esto me ha funcionado:

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

— Arun Raj
fuente

4

Además, esto funcionó muy bien para mí:

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

En este caso, $ _POST ['encode'] vino de esto:

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

El código PHP se insertó entre las etiquetas y.

— winthropita
fuente

3

El marcador de posición no puede establecer el valor predeterminado para el área de texto. Puedes usar

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

Esta es la etiqueta si la está utilizando para la conexión de la base de datos. Puede usar una sintaxis diferente si está usando otros idiomas además de php. Para php:

p.ej:

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

El comando requerido minimiza los esfuerzos necesarios para verificar los campos vacíos utilizando php.

— Automóvil club británico
fuente

1

Puedes usar this.innerHTML.

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

Expandir fragmento

Cuando el área de texto está enfocada, básicamente hace que el innerHTML del área de texto sea una cadena vacía.

— strahd
fuente

-1

Tenga en cuenta que si realizó cambios en textarea, después de que se haya procesado; Obtendrá el valor actualizado en lugar del 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 puede ver, el valor de textarea será diferente del texto entre la etiqueta de apertura y cierre de textarea de preocupación.

— Adeel Raza Azeemi
fuente

-5

También puede agregar el atributo "valor" y configurarlo para que sea así:


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

— pieza monstruosa
fuente

1

De la documentación de MDN : " <textarea>no admite el valueatributo".

— Robby Cornelissen

Escribir en React vale la pena alinearse con las especificaciones HTML.

— Tomasz Waszczyk