HTML | Propiedad de patrón de texto de entrada DOM

La propiedad de patrón de texto de entrada en HTML DOM se usa para establecer o devolver el atributo de patrón de un campo de texto. Se utiliza para especificar la expresión regular en la que se comprueba el valor de los elementos de entrada. Utilice el atributo de título global para describir el patrón para ayudar al usuario.

Sintaxis:

  • Devuelve la propiedad del patrón Input Text.
    textObject.pattern
  • Se utiliza para establecer la propiedad del patrón de texto de entrada.
    textObject.pattern = regexp

Valores de propiedad: contiene expresiones regulares de valor único que se utilizan para especificar la expresión regular con la que se comprueba el valor de un campo de texto.

Valor devuelto: devuelve un valor de string que representa la expresión regular con la que se compara un valor de campo de texto.

Ejemplo: Este ejemplo ilustra el uso de la propiedad de patrón Input Text.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Input Text Pattern Property
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1>GeeksForGeeks</h1> 
  
    <h2>DOM Input Text pattern Property</h2> 
      
    <form id="myGeeks">
        <input type="text" id="text_id" pattern="[A-Za-z]{3}"> 
    </form>
      
    <br><br>
      
    <button onclick="myGeeks()">Click Here!</button> 
      
    <p id="GFG" style="font-size:20px;"></p> 
      
    <!-- script to return the pattern Property-->
    <script> 
        function myGeeks() { 
            var txt = document.getElementById("text_id").pattern;
            document.getElementById("GFG").innerHTML = txt; 
        } 
    </script> 
</body> 
  
</html>                    

Salida:
Antes de hacer clic en el botón:

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

Navegadores compatibles: los navegadores compatibles con la propiedad de patrón de texto de entrada DOM se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *