質問編集履歴
2
ソースコード一部訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
###実現したいこと
|
|
2
2
|
|
|
3
|
-
``h2``のクリック時に``#input``を選択状態にしたい（入力できるようにしたい）です。
|
|
3
|
+
``h2``のクリック時に、``#input``を選択状態にしたい（入力できるようにしたい）です。
|
|
4
4
|
|
|
5
5
|
良い工夫があればぜひご教授ください。
|
|
6
6
|
|
|
@@ -42,19 +42,17 @@
|
|
|
42
42
|
|
|
43
43
|
position: absolute;
|
|
44
44
|
|
|
45
|
-
margin: auto;
|
|
46
|
-
|
|
47
45
|
left: 0px;
|
|
48
46
|
|
|
49
47
|
right: 0px;
|
|
48
|
+
|
|
49
|
+
bottom: 0;
|
|
50
50
|
|
|
51
51
|
width: 0px;
|
|
52
52
|
|
|
53
53
|
height: 2px;
|
|
54
54
|
|
|
55
55
|
border-bottom: 2px solid red;
|
|
56
|
-
|
|
57
|
-
bottom: 0;
|
|
58
56
|
|
|
59
57
|
}
|
|
60
58
|
|
|
@@ -65,6 +63,8 @@
|
|
|
65
63
|
下記でコメントアウトしてあるように、``.click()``、``.select()``、さらに``selectDomElm``などと３つ試したのですがいずれも``#input``は選択状態にならず、入力することができませんでした。
|
|
66
64
|
|
|
67
65
|
|
|
66
|
+
|
|
67
|
+
（もちろん、``h2``以外のクリック時には、``#input``の選択状態を解除したいとも考えています。）
|
|
68
68
|
|
|
69
69
|
```javascript
|
|
70
70
|
|
|
@@ -94,11 +94,13 @@
|
|
|
94
94
|
|
|
95
95
|
$('.box h2').next('.bar').animate({'width': '100%'},200);
|
|
96
96
|
|
|
97
|
-
/
|
|
97
|
+
/* ここで #input を選択状態にしたい */
|
|
98
98
|
|
|
99
|
-
//$('#input').
|
|
99
|
+
// $('#input').click();
|
|
100
100
|
|
|
101
|
+
// $('#input').select();
|
|
102
|
+
|
|
101
|
-
//selectDomElm('#input');
|
|
103
|
+
// selectDomElm('#input');
|
|
102
104
|
|
|
103
105
|
});
|
|
104
106
|
|
|
@@ -109,6 +111,8 @@
|
|
|
109
111
|
if(!$(e.target).closest('.box h2').length) {
|
|
110
112
|
|
|
111
113
|
$('.box').find('.bar').css('width','0');
|
|
114
|
+
|
|
115
|
+
/* ここで #input の選択状態を解除したい */
|
|
112
116
|
|
|
113
117
|
}
|
|
114
118
|
|
|
@@ -122,7 +126,7 @@
|
|
|
122
126
|
|
|
123
127
|
###サンプル
|
|
124
128
|
|
|
125
|
-
[https://jsfiddle.net/
|
|
129
|
+
[https://jsfiddle.net/jcv2axe3/](https://jsfiddle.net/jcv2axe3/)
|
|
126
130
|
|
|
127
131
|
|
|
128
132
|
|
1
注意に追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -128,4 +128,6 @@
|
|
|
128
128
|
|
|
129
129
|
###ご注意
|
|
130
130
|
|
|
131
|
-
|
|
131
|
+
・``#input``を``width:100%;``にするのはナシです。（★が別の行にいってしまうため。）
|
|
132
|
+
|
|
133
|
+
・``h2``を``contenteditable="true"``にするのもナシです。（★が削除できてしまうため。）
|