jQuery Mobile ist eine webbasierte Technologie, die verwendet wird, um responsive Inhalte zu erstellen, auf die auf allen Smartphones, Tablets und Desktops zugegriffen werden kann. In diesem Artikel erstellen wir mit jQuery Mobile einen Zahleneingabebereich.

Ansatz: Fügen Sie für Ihr Projekt benötigte jQuery Mobile-Skripte hinzu.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>



Beispiel: Wir erstellen mit jQuery Mobile einen Zahleneingabebereich. Wir verwenden das Attribut type=“number“ , um nur eine Zahl einzugeben, und das Attribut data-clear-btn=“true“ , um den Eingabetext zu löschen.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  
    <script src="http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h4>
            Design Number Input using jQuery Mobile
        </h4>
  
        <form style="width: 50%;">
            <label for="numberInput1">Number Input Area:</label>
            <input type="number" data-clear-btn="false" 
                name="numberInput1" id="numberInput1" value=""
                placeholder="Enter Number...">
  
            <label for="numberInput2">
                Number Input Area with clear button:
            </label>
            <input type="number" data-clear-btn="true" 
                name="numberInput2" id="numberInput2" value=""
                placeholder="Enter Number...">
  
            <label for="numberInput3">
                Number and pattern Input Area:
            </label>
            <input type="number" data-clear-btn="false" 
                name="numberInput3" pattern="[0-9]*" id="numberInput3" 
                value="" placeholder="Enter Number and pattern...">
  
            <label for="numberInput4">
                Number and pattern Input Area with clear button:
            </label>
            <input type="number" data-clear-btn="true" 
                name="numberInput4" pattern="[0-9]*" id="numberInput4" 
                value="" placeholder="Enter Number and pattern...">
        </form>
    </center>
</body>
  
</html>

Ausgabe: