Change number field

assets/css/app.css

@@ -107,7 +107,7 @@ body {
                     grid-gap: 0.5rem;
                     grid-template-columns: 2fr 3fr 30px;
                     align-items: center;
-                    input[type="text"] {
+                    input[type="text"], input[type="number"] {
                         font-weight: bold;
                         border: var(--primary) 1px solid;
                         text-align: right;

views/daten.twig.htm

@@ -24,22 +24,22 @@
 
             <label for="firstname">
                 <span>Vorname</span>
-                <input type="text" x-model="value.firstname" id="firstname">
+                <input type="number" x-model="value.firstname" id="firstname">
             </label>
 
             <label for="lastname">
                 <span>Nachname</span>
-                <input type="text" x-model="value.lastname" id="lastname">
+                <input type="number" x-model="value.lastname" id="lastname">
             </label>
 
             <label for="zip">
                 <span>PLZ</span>
-                <input type="text" x-model="value.zip" id="zip">
+                <input type="number" x-model="value.zip" id="zip">
             </label>
 
             <label for="location">
                 <span>Ort</span>
-                <input type="text" x-model="value.location" id="location">
+                <input type="number" x-model="value.location" id="location">
             </label>
 
             <label for="phone">
@@ -63,12 +63,12 @@
 
             <label for="haushalt">
                 <span>Haushaltsnetto monatlich</span>
-                <input type="text" x-model="value.haushalt" id="haushalt">
+                <input type="number" x-model="value.haushalt" id="haushalt">
             </label>
 
             <label for="einnahme">
                 <span>Netto-Mieteinnahme monatlich</span>
-                <input type="text" x-model="value.einnahme" id="einnahme">
+                <input type="number" x-model="value.einnahme" id="einnahme">
             </label>
 
             <div class="button-row">

views/stepper.twig.htm

@@ -40,20 +40,20 @@
                 <div class="form-container">
                     <div class="form-grid">
                         <label>Objektwert</label>
-                        <input type="text" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
+                        <input type="number" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
                         <span class="unit">€</span>
                     </div>
                     <div class="separator"></div>
                     <div class="form-grid">
                         <label>Umschuldung</label>
-                        <input type="text" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
+                        <input type="number" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
                         <span class="unit">€</span>
                         <span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
                     </div>
                     <div class="separator"></div>
                     <div class="form-grid">
                         <label>Zusätzl. Kapital</label>
-                        <input type="text" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
+                        <input type="number" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
                         <span  class="unit">€</span>
                     </div>
                     <div class="separator primary"></div>

views/vorhaben.twig.htm

@@ -4,7 +4,7 @@
     <div class="form-container">
         <div class="form-grid">
             <label>{{main.label}}</label>
-            <input type="text" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
+            <input type="number" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
             <span class="unit">€</span>
         </div>
         {% if bezahlt %}
@@ -19,7 +19,7 @@
         <div class="separator"></div>
         <div class="form-grid">
             <label>{{second.label}}</label>
-            <input type="text" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
+            <input type="number" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
             <span  class="unit">€</span>
         </div>
         <div class="separator"></div>
@@ -46,7 +46,7 @@
                 Makler
                 <span x-html="`${units.percent.to(parts.makler * 100)} %`"></span>
             </label>
-            <input type="text" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)"
+            <input type="number" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)"
                 @focus="$event.target.value = value.{{kind}}.{{main.value}} * parts.makler"
                 @blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);"
                    @change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};"
@@ -57,7 +57,7 @@
         <div class="separator"></div>
         <div class="form-grid">
             <label>Eigenkapital</label>
-            <input type="text" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
+            <input type="number" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
             <span class="unit">€</span>
         </div>
         <div class="separator primary"></div>