Cómo conseguir una área de texto por nombre en JQuery

Escrito por gareth downes-powell | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo conseguir una área de texto por nombre en JQuery
jQuery es una potente librería de JavaScript. (Medioimages/Photodisc/Photodisc/Getty Images)

jQuery es una potente librería de JavaScript que te permite crear funciones JavaScript complejas con un mínimo de código. Usando el sistema de selector de jQuery es sencillo hacer referencia a cualquier elemento en una página HTML, y después leer o cambiar su valor. Por ejemplo, puedes hacer referencia a un elemento por su referencia de identificación, o usando el valor del atributo del nombre. Puedes usar esto para realizar al validación de un elemento de formulario, o para leer un valor introducido por el usuario en un cálculo o algo parecido.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un navegador web y ve a la página de inicio de jQuery (jquery.com). Haz clic en la caja al lado de "Producción" en la esquina superior derecha de la pantalla de inicio, y después pulsa el botón "Descargar". Esto descargará la versión de producción de la librería jQuery, que está comprimida y reducida para conseguir un tamaño de archivo menor y un tiempo de descarga más rápido. Guarda el archivo descargado en un directorio llamado "jquery" en el directorio raíz de tu sitio web.

  2. 2

    Abre un editor de texto o aplicación de diseño web y crea una nueva página HTML. Añade el siguiente código entre las etiquetas HTML "<head>" y "</head>".

    <script type="text/javascript" src="/jquery/jquery-1.6.2.min.js"></script>

    Este código carga la librería jQuery para usarla en la página. Cambia el número de versión al final del nombre de archivo para que coincida con la versión que has descargado, ya que se lanzan nuevas versiones regularmente.

  3. 3

    Añade el código siguiente a tu página, entre las etiquetas HTML "<body>" y "</body>".

    <form id="myForm" name="MyForm" method="post" action="example.htm"> <textarea name="myTextArea" id="myTextArea" cols="45" rows="5"></textarea> <input type="button" name="myButton" id="myButton" value="Display" /> </form>

    Esto añade un formulario a tu página, que contendrá una zona de texto HTML llamada "myTextArea", y un botón HTML, que lanzará un código para obtener los contenidos de la zona de texto al hacer clic.

  4. 4

    Añade el siguiente código a la etiqueta de entrada HTML usada para crear el botón, después del atributo de valor y antes de la etiqueta de cierre.

    onclick="alert($('textarea[name=myTextArea]').val());"

    Esto usa el código "$('textarea[name=myTextArea]').val()" de jQuery para leer los contenidos de la zona de texto que tiene un nombre de atributo que contiene "myTextArea". Usar esta sintaxis te permite referenciar cualquier elemento HTML usando su nombre. La función val() dice a jQuery que lea el valor de un elemento seleccionado, que lee cualquier texto introducido por el usuario. El código jQuery está envuelto en una función "alert()" de JavaScript para mostrar el valor de la zona de texto en un cuadro de alerta cuando se pulsa el botón.

  5. 5

    Guarda la página como "example.htm" y cárgala en tu servidor web. Abre un navegador web y ve a la página "example.htm" en tu servidor. Escribe algún texto en la zona de texto y pulsa el botón "Mostrar". Aparecerá un cuadro de alerta, que contendrá el texto que has escrito en la zona de texto.

Consejos y advertencias

  • Puedes escoger el valor de la zona de texto usando el mismo comando, pero proporcionando la función val con el valor a asignar, por ejemplo.
  • onclick="$('textarea[name=myTextArea]').val('Esto indica un valor');"

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles