¿Cómo cambiar el texto del marcador de posición usando jQuery?

El texto del marcador de posición es la salida de texto para el usuario para qué es esa entrada. Al igual que en HTML, usamos Nombre como campo de entrada y colocamos un texto dentro de ese espacio, es decir, ingrese su nombre. Como se muestra en la siguiente imagen:

Nombre:

Así que queremos un botón o algún evento que cambie ese texto de marcador de posición a otro texto. Para ello disponemos de 2 métodos que se describen a continuación:

Método 1: En este método usaremos el método attr() . El método attr() se utiliza para establecer o devolver el atributo especificado de un elemento seleccionado. Toma dos argumentos, el primero es el atributo que se establecerá y el segundo es el valor del atributo que se cambiará.

El atributo «marcador de posición» controla el texto que se mostrará como marcador de posición en un área de entrada. Este atributo se pasa como primer argumento al método attr() . El texto requerido que se establecerá se pasa como el segundo argumento. Esto cambiará el texto del marcador de posición del elemento al nuevo texto.

Sintaxis:

$('selectedTextarea').attr('placeholder', 'Placeholder text');

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>
        Changing Placeholder text
    </title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
     GeeksforGeeks
    </h1>
    <b>
     Changing Placeholder text
    </b>
    <p>
      Click the button to change placeholder 
      of the textarea.
    </p>
    <textarea id="area1" placeholder="Default Text"></textarea>
    <br>
    <button onclick="changePlaceholder()">
        Change Placeholder
    </button>
  
    <script src="https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <script type="text/javascript">
        function changePlaceholder() {
            $('#area1').attr('placeholder',
                'This is a new placeholder');
        }
    </script>
</body>
  
</html>

Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:

Método 2: Usar la propiedad de marcador de posición. La propiedad «marcador de posición» se utiliza para obtener o establecer el marcador de posición de un texto de entrada. Esto se puede usar para cambiar el texto del marcador de posición a uno nuevo. El elemento se selecciona primero usando un selector jQuery. El nuevo texto de marcador de posición se puede asignar a la propiedad de marcador de posición del elemento. Esto cambiará el texto del marcador de posición del elemento al nuevo texto.

Sintaxis:

selectedTextarea = $('selectedTextarea')[0];
selectedTextarea.placeholder = "Placeholder text";

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Changing Placeholder text
    </title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
     GeeksforGeeks
    </h1>
    <b>
     Changing Placeholder text
    </b>
    <p>
     Click the button to change placeholder 
     of the textarea.
    </p>
    <textarea id="area1" placeholder="Default Text"></textarea>
    <br>
    <button onclick="changePlaceholder()">
        Change Placeholder
    </button>
  
    <script src="https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <script type="text/javascript">
        function changePlaceholder() {
            selectedTextarea = $('#area1')[0];
  
            selectedTextarea.placeholder =
                "This is a new placeholder";
        }
    </script>
</body>
  
</html>

Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta