jQuery Establecer valor del área de texto
-
.val()frente a.attr() -
Utilice el método
.val()para establecer el valor delárea de texto -
Use el método
.attr()para establecer el valor para elárea de texto
En JavaScript, instanciamos una instancia del elemento, id o clase HTML a través del método querySelector(). Pero para los ejemplos de este tutorial, usaremos jQuery(#id).
Nuevamente, existen otras convenciones para establecer valores para el área de texto, como agregar atributos adecuados en la etiqueta HTML, etc. Por lo tanto, no nos centraremos en la manipulación de DOM, sino que resolveremos el problema con jQuery.
En el tutorial de hoy, aprenderemos el uso de los métodos .val() y .attr() para establecer el valor del área de texto en JQuery.
.val() frente a .attr()
El método .val() utilizado en jQuery para establecer el valor de entrada o área de texto muestra una cadena. De forma predeterminada, el área de texto permanece vacía, pero una línea, una palabra o una explicación predefinida pueden dar una idea clara de qué hacer en este ámbito.
Por lo general, para la mayoría de las etiquetas de entrada, encontramos el atributo valor para establecer una cadena predeterminada. Pero en el caso de la etiqueta textarea, no hay atributo value; en cambio, hay un atributo de marcador de posición. Ahora examinaremos las instancias que representan estas soluciones en el segmento de código.
Utilice el método .val() para establecer el valor del área de texto
Tendremos un área de texto de dimensión fija en nuestro ejemplo. Además, agregaremos una id para ello. La tarea es sencilla; tome una instancia para esa etiqueta con el id especificado y aplique el método .val().
Dentro del método, pase una cadena (por ejemplo: "Esta es un área de texto"), o puede almacenar la cadena en una variable y luego pasarla. Pero, primero, visualicemos la valla de código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 1";
$("#txt").val(str);
</script>
</body>
</html>
Producción:
Como se puede ver, en el cuadro del área de texto, el valor se estableció como una cadena. Es posible que pueda notar que la cuerda es removible. Esta convención parece un poco desactualizada o simplemente no es lo suficientemente buena. Entonces, vamos con el siguiente ejemplo.
Use el método .attr() para establecer el valor para el área de texto
El método .attr() establece específicamente el valor del atributo para cualquier elemento HTML. Es la forma principal de establecer atributos no junto con los elementos DOM, sino usarlos a través de jQuery o JavaScript, ya que pueden manejarse dinámicamente según su elección.
Sin embargo, aquí estableceremos los parámetros para el método, y el elemento textarea tiene un atributo validado llamado placeholder. Entonces, le daremos al primer parámetro marcador de posición, y el segundo argumento será el valor. Pero, primero, revisemos las líneas de código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 2";
$("#txt").attr("placeholder", str);
</script>
</body>
</html>
Producción:
Y el resultado muestra que la cadena pasada en el método .attr() se estableció como valor de marcador de posición. Y esta es una vista más integrada e inteligente como establecer la vista de un área de texto.
