teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

typo修正

2017/07/04 04:17

投稿

think49
think49

スコア18194

answer CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
  ### input[type=number]
21
21
 
22
- **(2017/0.04 13:16 追記)**
22
+ **(2017/07/04 13:16追記)**
23
23
  このコードは全角数字を入力できないブラウザ(Google Chrome)がある為、使用できませんでした。
24
24
  後述の `input[type=text]` のコードを使用して下さい。
25
25
 

3

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

2017/07/04 04:17

投稿

think49
think49

スコア18194

answer CHANGED
@@ -11,15 +11,17 @@
11
11
  <script>
12
12
  jQuery('#minutes').on('change', function (event) {
13
13
  var minutes = event.target.valueAsNumber;
14
-
14
+
15
15
  jQuery('#output').text(minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分');
16
16
  });
17
17
  </script>
18
18
  ```
19
19
 
20
- ### [input[type=number]
20
+ ### input[type=number]
21
21
 
22
+ **(2017/0.04 13:16 追記)**
23
+ このコードは全角数字を入力できないブラウザ(Google Chrome)がある為、使用できませんでした。
22
- `input[type=number]` も候補に入りそうです
24
+ 後述の `input[type=text]` のコードを使用して下さい
23
25
 
24
26
  - [input[type=number] - JSFiddle](https://jsfiddle.net/kmmdaL4q/3/)
25
27
 
@@ -44,4 +46,77 @@
44
46
  </script>
45
47
  ```
46
48
 
49
+ ### input[type=text]
50
+
51
+ - [input[type=text] - JSFiddle](https://jsfiddle.net/kmmdaL4q/6/)
52
+ - [4.10.5 The input element - HTML Standard](https://html.spec.whatwg.org/multipage/input.html#the-input-element)
53
+
54
+ ```HTML
55
+ <style>
56
+ input:invalid {
57
+ border: solid 3px #f88;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body>
62
+
63
+ <input id="minutes" type="text" pattern="0*[0-9]{0,2}[05]$" maxlength="3" value="0" data-custom-error-message="0-995 の間の5の倍数を指定して下さい">
64
+ <div id="output"></div>
65
+
66
+ <script>
67
+ 'use strict';
68
+ (function () {
69
+ function toASCIINumber (numberString) {
70
+ return numberString.replace(/[0-9]/g, function (numberChar) {
71
+ var multiByte = '0123456789', singleByte = '0123456789';
72
+
73
+ return singleByte[multiByte.indexOf(numberChar)];
74
+ });
75
+ }
76
+
77
+ function handleInput (event) {
78
+ var input = event.target, minutes = toASCIINumber(input.value), message;
79
+
80
+ if (input.value !== minutes) {
81
+ input.value = minutes;
82
+ }
83
+
84
+ minutes = Number(minutes);
85
+ input.setCustomValidity(''); // Reset input.validity.customError to false.
86
+
87
+ if (input.checkValidity()) {
88
+ message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分';
89
+ } else {
90
+ message = input.validationMessage;
91
+ }
92
+
93
+ jQuery('#output').text(message);
94
+ }
95
+
96
+ function handleInvalid (event) {
97
+ var input = event.target;
98
+
99
+ input.setCustomValidity(input.getAttribute('data-custom-error-message'));
100
+ }
101
+
102
+ jQuery('#minutes').on('input', handleInput).on('invalid', handleInvalid).trigger('input');
103
+ }());
104
+ </script>
105
+ ```
106
+
107
+ ### Safari で <input type="number" /> を使用できない
108
+
109
+ > また<input type="number" />はsafariで<input type="text" />と同じ挙動になってしまったので使用できない。
110
+
111
+ 念のため、確認しますが、iOS Safari ではなく、Mac Safari でしょうか。
112
+ Google Chrome 59.0.3071.115 で input[type=number] において、全角数字の入力を受け付けない現象は確認できました。
113
+ Can I use によれば、iOS Safari 9.3-11 はインクリメント/デクリメントボタンが存在せず、min, max, step 属性を実装していません。
114
+
115
+ - [Number input type - Can I use...](http://caniuse.com/#feat=input-number)
116
+
117
+ ### 更新履歴
118
+
119
+ - 2017/07/04 01:47 input[type=number] のコード追記
120
+ - 2017/07/04 13:16 input[type=text] のコード追記
121
+
47
122
  Re: wtn さん

2

input\[type=number\]

2017/07/04 04:16

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  ### input[type=range]
2
2
 
3
- UIが変わりますが、input[type=range] なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。
3
+ UIが変わりますが、`input[type=range]` なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。
4
4
 
5
5
  - [input[type=range] - JSFiddle](https://jsfiddle.net/kmmdaL4q/1/)
6
6
 
@@ -17,4 +17,31 @@
17
17
  </script>
18
18
  ```
19
19
 
20
+ ### [input[type=number]
21
+
22
+ `input[type=number]` も候補に入りそうです。
23
+
24
+ - [input[type=number] - JSFiddle](https://jsfiddle.net/kmmdaL4q/3/)
25
+
26
+ ```HTML
27
+ <input id="minutes" type="number" min="0" max="1000" step="5">
28
+ <div id="output"></div>
29
+
30
+ <script>
31
+ 'use strict';
32
+ jQuery('#minutes').on('input change', function (event) {
33
+ var input = event.target, message;
34
+
35
+ if (input.checkValidity()) {
36
+ var minutes = input.value.length ? input.valueAsNumber : 0;
37
+ message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分';
38
+ } else {
39
+ message = input.validationMessage;
40
+ }
41
+
42
+ jQuery('#output').text(message);
43
+ });
44
+ </script>
45
+ ```
46
+
20
47
  Re: wtn さん

1

markdown修正

2017/07/03 16:47

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,8 +1,9 @@
1
1
  ### input[type=range]
2
2
 
3
- UIが変わりますが、input[type=range] なら5刻みで入力を強制出来るのでが、キーボード入力は必須でしょうか。
3
+ UIが変わりますが、input[type=range] なら5刻みで入力を強制出来キーボード入力は必須でしょうか。
4
- https://jsfiddle.net/kmmdaL4q/
5
4
 
5
+ - [input[type=range] - JSFiddle](https://jsfiddle.net/kmmdaL4q/1/)
6
+
6
7
  ```HTML
7
8
  <input id="minutes" type="range" min="0" max="1000" step="5">
8
9
  <div id="output"></div>