From 046a70c5f636f0deeaebd6ec1633a929dec17492 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Wed, 21 Feb 2018 19:51:31 -0600
Subject: [PATCH] Add `NumberInputWidget` for `<input type="number" />`

---
 tailbone/forms/widgets.py                |  5 +++++
 tailbone/templates/deform/numberinput.pt | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 tailbone/templates/deform/numberinput.pt

diff --git a/tailbone/forms/widgets.py b/tailbone/forms/widgets.py
index d0b13f22..9374021d 100644
--- a/tailbone/forms/widgets.py
+++ b/tailbone/forms/widgets.py
@@ -50,6 +50,11 @@ class ReadonlyWidget(dfwidget.HiddenWidget):
         return HTML.tag('span', text) + tags.hidden(field.name, value=cstruct, id=field.oid)
 
 
+class NumberInputWidget(dfwidget.TextInputWidget):
+    template = 'numberinput'
+    autocomplete = 'off'
+
+
 class PlainSelectWidget(dfwidget.SelectWidget):
     template = 'select_plain'
 
diff --git a/tailbone/templates/deform/numberinput.pt b/tailbone/templates/deform/numberinput.pt
new file mode 100644
index 00000000..2204f40c
--- /dev/null
+++ b/tailbone/templates/deform/numberinput.pt
@@ -0,0 +1,24 @@
+<span tal:define="name name|field.name;
+                  css_class css_class|field.widget.css_class;
+                  oid oid|field.oid;
+                  mask mask|field.widget.mask;
+                  mask_placeholder mask_placeholder|field.widget.mask_placeholder;
+                  style style|field.widget.style;
+                  autocomplete autocomplete|field.widget.autocomplete|'off';
+"
+      tal:omit-tag="">
+    <input type="number" name="${name}" value="${cstruct}" 
+           tal:attributes="class string: form-control ${css_class or ''};
+                           style style;
+                           autocomplete autocomplete;
+                           "
+           id="${oid}"/>
+    <script tal:condition="mask" type="text/javascript">
+      deform.addCallback(
+         '${oid}',
+         function (oid) {
+            $("#" + oid).mask("${mask}", 
+                 {placeholder:"${mask_placeholder}"});
+         });
+    </script>
+</span>