質問編集履歴

4

修正

2016/05/24 13:56

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -145,3 +145,119 @@
145
145
 
146
146
 
147
147
  ```
148
+
149
+
150
+
151
+
152
+
153
+ ---
154
+
155
+
156
+
157
+ 追記2
158
+
159
+
160
+
161
+ タイムマージンを使った方法
162
+
163
+ ```htnl
164
+
165
+ <!DOCTYPE HTML>
166
+
167
+ <html>
168
+
169
+ <head>
170
+
171
+ <meta charset="UTF-8"/>
172
+
173
+ <meta http-equiv="content-language" content="ja"/>
174
+
175
+ <title>TEST</title>
176
+
177
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
178
+
179
+ <style>
180
+
181
+ #box{
182
+
183
+ position: relative;
184
+
185
+ background: aqua;
186
+
187
+ top:20px;
188
+
189
+ width: 300px;
190
+
191
+ border: solid blue;
192
+
193
+ }
194
+
195
+ </style>
196
+
197
+ </head>
198
+
199
+ <body>
200
+
201
+ <input type="text" id="textbox">
202
+
203
+ <div id="box" style="display:none">
204
+
205
+ <a href="">リンク</a><br>
206
+
207
+ <button type="button">ボタン</button>
208
+
209
+ </div>
210
+
211
+
212
+
213
+ <script>
214
+
215
+ $(function(){
216
+
217
+
218
+
219
+ // ボックスを表示する
220
+
221
+ $('#textbox').on('focus',function(){
222
+
223
+ $('#box').show();
224
+
225
+ });
226
+
227
+
228
+
229
+ // ボックスを非表示にする
230
+
231
+ var timerId
232
+
233
+ $('#textbox').on('focusout',function(){
234
+
235
+ timerId = setTimeout(function(){
236
+
237
+ $('#box').hide();
238
+
239
+ },1000);
240
+
241
+ });
242
+
243
+
244
+
245
+ // ボックス内をクリックした際ボックスを非表示にしない
246
+
247
+ $('#box').on('click',function(){
248
+
249
+ clearTimeout(timerId);
250
+
251
+ });
252
+
253
+ });
254
+
255
+ </script>
256
+
257
+
258
+
259
+ </body>
260
+
261
+ </html>
262
+
263
+ ```

3

依頼対応

2016/05/24 13:56

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,109 @@
39
39
 
40
40
 
41
41
  focusoutには別にこだわっていないので、何かいい方法や別のやり方を知っていらっしゃる方がいれば教えていただきたいです。
42
+
43
+
44
+
45
+
46
+
47
+ ---
48
+
49
+
50
+
51
+ 追記
52
+
53
+
54
+
55
+ 画面イメージ
56
+
57
+
58
+
59
+ ![イメージ説明](b093a467bbf6fd1f14f9e733065d8a05.png)
60
+
61
+
62
+
63
+ コードは以下です。
64
+
65
+ ```html
66
+
67
+ <!DOCTYPE HTML>
68
+
69
+ <html>
70
+
71
+ <head>
72
+
73
+ <meta charset="UTF-8"/>
74
+
75
+ <meta http-equiv="content-language" content="ja"/>
76
+
77
+ <title>TEST</title>
78
+
79
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
80
+
81
+ <style>
82
+
83
+ #box{
84
+
85
+ position: relative;
86
+
87
+ background: aqua;
88
+
89
+ top:20px;
90
+
91
+ width: 300px;
92
+
93
+ border: solid blue;
94
+
95
+ }
96
+
97
+ </style>
98
+
99
+ </head>
100
+
101
+ <body>
102
+
103
+ <input type="text" id="textbox">
104
+
105
+ <div id="box" style="display:none">
106
+
107
+ <a href="a.shtml">リンク</a><br>
108
+
109
+ <button type="button">ボタン</button>
110
+
111
+ </div>
112
+
113
+ <script>
114
+
115
+ $(function(){
116
+
117
+
118
+
119
+ // ボックスを表示する
120
+
121
+ $('#textbox').on('focus',function(){
122
+
123
+ $('#box').show();
124
+
125
+ });
126
+
127
+
128
+
129
+ // ボックスを非表示にする
130
+
131
+ $('#textbox').on('focusout',function(){
132
+
133
+ $('#box').hide();
134
+
135
+ });
136
+
137
+ });
138
+
139
+ </script>
140
+
141
+ </body>
142
+
143
+ </html>
144
+
145
+
146
+
147
+ ```

2

2016/05/24 13:09

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 現在上記タグを使って、アプリ開発を行っています。
1
+ 現在上記タグの技術を使って、アプリ開発を行っています。
2
2
 
3
3
 
4
4
 

1

2016/05/24 11:17

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 現在上記の関連タグの技術を使って、アプリ開発を行っています。
1
+ 現在上記のタグを使って、アプリ開発を行っています。
2
2
 
3
3
 
4
4