jQuery Mobile - Número de entrada de texto

Descripción

El tipo de entrada numérica permite al usuario introducir valores numéricos.

Ejemplo

El siguiente ejemplo demuestra el uso de la entrada de números en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <form>
         <h2>Number Input Example</h2>
         <label for = "number">Simple Number Input</label>
         <input type = "number" id = "number" data-clear-btn = "false">
         
         <label for = "number1">Clear the Number Field</label>
         <input type = "number" data-clear-btn = "true" id = "number1">
         
         <label for = "number2">Number Pattern</label>
         <input type = "number" id = "number2" pattern = "[0-9]*" data-clear-btn = "false">
         
         <label for = "number3">Clear the Number Pattern Field</label>
         <input type = "number" data-clear-btn = "true" id = "number3" pattern = "[0-9]*">
      </form>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código html anterior como textinput_number.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/textinput_number.html y se mostrará el siguiente resultado.