1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!DOCTYPE HTML>
<html>
<head>
<title>Cleave.js editor examples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="../../../javascript/jquery/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap3 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../../../javascript/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="../../../javascript/bootstrap/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="../../../javascript/bootstrap/js/bootstrap.min.js" ></script>
<!-- Foundation
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
-->
<!-- Cleave.js -->
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.4.7/dist/cleave.min.js" integrity="sha256-/vtm6dO6rn9i2XRWyrQX8uvtO0qHrkYiEuI5hNvFHHk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cleave.js@1.4.7/dist/addons/cleave-phone.dk.js"></script>
<!-- JSON-Editor -->
<script src="../../../javascript/json-editor/jsoneditor.min.js"></script>
<style type="text/css">
body {
margin: 1em;
}
</style>
</head>
<body>
<h2>Example showing how to use Cleave.js to format your <input/> content when you are typing.</h2>
<p>For documentation on the Cleave.js options, look at <a href="https://github.com/nosir/cleave.js" target="_blank" title="Cleave.js Github">Cleave.js</a> Github page. You can also find a lot of examples in this <a href="https://jsfiddle.net/nosir/aLnhdf3z/" target="_blank" title="Cleave.js JSFiddle">JSFiddle</a> page.</p>
<div id="form"></div>
<script type="text/javascript">
// Show the creditcard type in the field 'help-block' section
// Possible values: uatp, amex, diners, discover, mastercard, dankort, instapayment, jcb15, jcb, maestro, visa, mir, unionPay, general, generalStrict, unknown
var creditCardTypeChangedHandler = function(type) {
var el = this.element.nextSibling;
if (el && el.classList.contains('help-block')) {
el.innerHTML = 'Card type: <strong>' + type + '</strong>';
}
}
var options = {
"theme": "bootstrap3",
"template": "handlebars",
"iconlib": "bootstrap3",
"schema": {
"title": "Cleave.js editor examples",
"id": "test",
"type": "object",
"format": "grid",
"options": {
"disable_edit_json": false,
"disable_properties": false
},
"properties": {
"creditcard": {
"type": "string",
"title": "Credit Card",
"description": " ",
"options": {
"grid_columns": 6,
"inputAttributes": {
"placeholder": "enter credit card number"
},
"cleave": {
"creditCard": true,
"onCreditCardTypeChanged": creditCardTypeChangedHandler
}
}
},
"phone": {
"type": "string",
"title": "Phone number",
"description": "Phone number formatting (danish) + prefix",
"options": {
"grid_columns": 6,
"cleave": {
"phone": true,
"phoneRegionCode": "dk",
"prefix": "+45 ",
"noImmediatePrefix": false
}
}
},
"prefix": {
"type": "string",
"title": "Prefix",
"description": "Prefix",
"options": {
"grid_columns": 6,
"cleave": {
"prefix": "JE-"
}
}
},
"blocks": {
"type": "string",
"title": "Serial number",
"description": "Blocks, uppercase formatting",
"options": {
"grid_columns": 6,
"inputAttributes": {
"placeholder": "Enter serial number",
},
"cleave": {
"blocks": [3, 5, 5],
"uppercase": true,
"delimiter": "-",
"delimiterLazyShow": true
}
}
}
}
}
}
var element = document.getElementById('form');
var editor = new JSONEditor(element, options);
</script>
</body>
</html>
|
