質問編集履歴
2
ソースコード一部訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
###実現したいこと
|
|
2
|
-
``h2``のクリック時に``#input``を選択状態にしたい（入力できるようにしたい）です。
|
|
2
|
+
``h2``のクリック時に、``#input``を選択状態にしたい（入力できるようにしたい）です。
|
|
3
3
|
良い工夫があればぜひご教授ください。
|
|
4
4
|
|
|
5
5
|
|
|
@@ -20,18 +20,18 @@
|
|
|
20
20
|
}
|
|
21
21
|
.bar {
|
|
22
22
|
position: absolute;
|
|
23
|
-
margin: auto;
|
|
24
23
|
left: 0px;
|
|
25
24
|
right: 0px;
|
|
25
|
+
bottom: 0;
|
|
26
26
|
width: 0px;
|
|
27
27
|
height: 2px;
|
|
28
28
|
border-bottom: 2px solid red;
|
|
29
|
-
bottom: 0;
|
|
30
29
|
}
|
|
31
30
|
```
|
|
32
31
|
###試したこと
|
|
33
32
|
下記でコメントアウトしてあるように、``.click()``、``.select()``、さらに``selectDomElm``などと３つ試したのですがいずれも``#input``は選択状態にならず、入力することができませんでした。
|
|
34
33
|
|
|
34
|
+
（もちろん、``h2``以外のクリック時には、``#input``の選択状態を解除したいとも考えています。）
|
|
35
35
|
```javascript
|
|
36
36
|
// 指定要素を選択状態にする
|
|
37
37
|
function selectDomElm(obj){
|
|
@@ -46,21 +46,23 @@
|
|
|
46
46
|
|
|
47
47
|
$(document).on("click",".box h2", function(){
|
|
48
48
|
$('.box h2').next('.bar').animate({'width': '100%'},200);
|
|
49
|
+
/* ここで #input を選択状態にしたい */
|
|
49
|
-
//$('#input').click();
|
|
50
|
+
// $('#input').click();
|
|
50
|
-
//$('#input').select();
|
|
51
|
+
// $('#input').select();
|
|
51
|
-
//selectDomElm('#input');
|
|
52
|
+
// selectDomElm('#input');
|
|
52
53
|
});
|
|
53
54
|
|
|
54
55
|
$(document).on('click',function(e) {
|
|
55
56
|
if(!$(e.target).closest('.box h2').length) {
|
|
56
57
|
$('.box').find('.bar').css('width','0');
|
|
58
|
+
/* ここで #input の選択状態を解除したい */
|
|
57
59
|
}
|
|
58
60
|
});
|
|
59
61
|
|
|
60
62
|
});
|
|
61
63
|
```
|
|
62
64
|
###サンプル
|
|
63
|
-
[https://jsfiddle.net/
|
|
65
|
+
[https://jsfiddle.net/jcv2axe3/](https://jsfiddle.net/jcv2axe3/)
|
|
64
66
|
|
|
65
67
|
###ご注意
|
|
66
68
|
・``#input``を``width:100%;``にするのはナシです。（★が別の行にいってしまうため。）
|
1
注意に追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -63,4 +63,5 @@
|
|
|
63
63
|
[https://jsfiddle.net/8c7wphs1/](https://jsfiddle.net/8c7wphs1/)
|
|
64
64
|
|
|
65
65
|
###ご注意
|
|
66
|
-
|
|
66
|
+
・``#input``を``width:100%;``にするのはナシです。（★が別の行にいってしまうため。）
|
|
67
|
+
・``h2``を``contenteditable="true"``にするのもナシです。（★が削除できてしまうため。）
|