teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問フォーム入力欄に半角数字以外を入力できないようにしたい

編集履歴

回答編集履歴

4

typo修正

2017/07/04 04:17

投稿

think49
think49

スコア18166

test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
 
42
42
 
43
- **(2017/0.04 13:16 追記)**
43
+ **(2017/07/04 13:16追記)**
44
44
 
45
45
  このコードは全角数字を入力できないブラウザ(Google Chrome)がある為、使用できませんでした。
46
46
 

3

input\[type=text\] のコード追記

2017/07/04 04:17

投稿

think49
think49

スコア18166

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  var minutes = event.target.valueAsNumber;
26
26
 
27
-
27
+
28
28
 
29
29
  jQuery('#output').text(minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分');
30
30
 
@@ -36,11 +36,15 @@
36
36
 
37
37
 
38
38
 
39
- ### [input[type=number]
39
+ ### input[type=number]
40
+
41
+
42
+
40
-
43
+ **(2017/0.04 13:16 追記)**
44
+
41
-
45
+ このコードは全角数字を入力できないブラウザ(Google Chrome)がある為、使用できませんでした。
42
-
46
+
43
- `input[type=number]` も候補に入りそうです。
47
+ 後述の `input[type=text]` のコードを使用して下さい。
44
48
 
45
49
 
46
50
 
@@ -90,4 +94,150 @@
90
94
 
91
95
 
92
96
 
97
+ ### input[type=text]
98
+
99
+
100
+
101
+ - [input[type=text] - JSFiddle](https://jsfiddle.net/kmmdaL4q/6/)
102
+
103
+ - [4.10.5 The input element - HTML Standard](https://html.spec.whatwg.org/multipage/input.html#the-input-element)
104
+
105
+
106
+
107
+ ```HTML
108
+
109
+ <style>
110
+
111
+ input:invalid {
112
+
113
+ border: solid 3px #f88;
114
+
115
+ }
116
+
117
+ </style>
118
+
119
+ </head>
120
+
121
+ <body>
122
+
123
+
124
+
125
+ <input id="minutes" type="text" pattern="0*[0-9]{0,2}[05]$" maxlength="3" value="0" data-custom-error-message="0-995 の間の5の倍数を指定して下さい">
126
+
127
+ <div id="output"></div>
128
+
129
+
130
+
131
+ <script>
132
+
133
+ 'use strict';
134
+
135
+ (function () {
136
+
137
+ function toASCIINumber (numberString) {
138
+
139
+ return numberString.replace(/[０-９]/g, function (numberChar) {
140
+
141
+ var multiByte = '０１２３４５６７８９', singleByte = '0123456789';
142
+
143
+
144
+
145
+ return singleByte[multiByte.indexOf(numberChar)];
146
+
147
+ });
148
+
149
+ }
150
+
151
+
152
+
153
+ function handleInput (event) {
154
+
155
+ var input = event.target, minutes = toASCIINumber(input.value), message;
156
+
157
+
158
+
159
+ if (input.value !== minutes) {
160
+
161
+ input.value = minutes;
162
+
163
+ }
164
+
165
+
166
+
167
+ minutes = Number(minutes);
168
+
169
+ input.setCustomValidity(''); // Reset input.validity.customError to false.
170
+
171
+
172
+
173
+ if (input.checkValidity()) {
174
+
175
+ message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分';
176
+
177
+ } else {
178
+
179
+ message = input.validationMessage;
180
+
181
+ }
182
+
183
+
184
+
185
+ jQuery('#output').text(message);
186
+
187
+ }
188
+
189
+
190
+
191
+ function handleInvalid (event) {
192
+
193
+ var input = event.target;
194
+
195
+
196
+
197
+ input.setCustomValidity(input.getAttribute('data-custom-error-message'));
198
+
199
+ }
200
+
201
+
202
+
203
+ jQuery('#minutes').on('input', handleInput).on('invalid', handleInvalid).trigger('input');
204
+
205
+ }());
206
+
207
+ </script>
208
+
209
+ ```
210
+
211
+
212
+
213
+ ### Safari で <input type="number" /> を使用できない
214
+
215
+
216
+
217
+ > また<input type="number" />はsafariで<input type="text" />と同じ挙動になってしまったので使用できない。
218
+
219
+
220
+
221
+ 念のため、確認しますが、iOS Safari ではなく、Mac Safari でしょうか。
222
+
223
+ Google Chrome 59.0.3071.115 で input[type=number] において、全角数字の入力を受け付けない現象は確認できました。
224
+
225
+ Can I use によれば、iOS Safari 9.3-11 はインクリメント/デクリメントボタンが存在せず、min, max, step 属性を実装していません。
226
+
227
+
228
+
229
+ - [Number input type - Can I use...](http://caniuse.com/#feat=input-number)
230
+
231
+
232
+
233
+ ### 更新履歴
234
+
235
+
236
+
237
+ - 2017/07/04 01:47 input[type=number] のコード追記
238
+
239
+ - 2017/07/04 13:16 input[type=text] のコード追記
240
+
241
+
242
+
93
243
  Re: wtn さん

2

input\[type=number\]

2017/07/04 04:16

投稿

think49
think49

スコア18166

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- UIが変わりますが、input[type=range] なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。
5
+ UIが変わりますが、`input[type=range]` なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。
6
6
 
7
7
 
8
8
 
@@ -36,4 +36,58 @@
36
36
 
37
37
 
38
38
 
39
+ ### [input[type=number]
40
+
41
+
42
+
43
+ `input[type=number]` も候補に入りそうです。
44
+
45
+
46
+
47
+ - [input[type=number] - JSFiddle](https://jsfiddle.net/kmmdaL4q/3/)
48
+
49
+
50
+
51
+ ```HTML
52
+
53
+ <input id="minutes" type="number" min="0" max="1000" step="5">
54
+
55
+ <div id="output"></div>
56
+
57
+
58
+
59
+ <script>
60
+
61
+ 'use strict';
62
+
63
+ jQuery('#minutes').on('input change', function (event) {
64
+
65
+ var input = event.target, message;
66
+
67
+
68
+
69
+ if (input.checkValidity()) {
70
+
71
+ var minutes = input.value.length ? input.valueAsNumber : 0;
72
+
73
+ message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分';
74
+
75
+ } else {
76
+
77
+ message = input.validationMessage;
78
+
79
+ }
80
+
81
+
82
+
83
+ jQuery('#output').text(message);
84
+
85
+ });
86
+
87
+ </script>
88
+
89
+ ```
90
+
91
+
92
+
39
93
  Re: wtn さん

1

markdown修正

2017/07/03 16:47

投稿

think49
think49

スコア18166

test CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- UIが変わりますが、input[type=range] なら5刻みで入力を強制出来るのですが、キーボード入力は必須でしょうか。
5
+ UIが変わりますが、input[type=range] なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。
6
6
 
7
+
8
+
7
- https://jsfiddle.net/kmmdaL4q/
9
+ - [input[type=range] - JSFiddle](https://jsfiddle.net/kmmdaL4q/1/)
8
10
 
9
11
 
10
12