###実現したいこと
h2
のクリック時に、#input
を選択状態にしたい(入力できるようにしたい)です。
良い工夫があればぜひご教授ください。
###該当のソースコード
html
1<div class="box"> 2 <h2> 3 <span id="input" contenteditable="true">Hello</span> 4 <span class="icon" contenteditable="false">★</span> 5 </h2> 6 <span class="bar"></span> 7</div>
css
1.box { 2 position: relative; 3 background: #eee; 4} 5.bar { 6 position: absolute; 7 left: 0px; 8 right: 0px; 9 bottom: 0; 10 width: 0px; 11 height: 2px; 12 border-bottom: 2px solid red; 13}
###試したこと
下記でコメントアウトしてあるように、.click()
、.select()
、さらにselectDomElm
などと3つ試したのですがいずれも#input
は選択状態にならず、入力することができませんでした。
(もちろん、h2
以外のクリック時には、#input
の選択状態を解除したいとも考えています。)
javascript
1// 指定要素を選択状態にする 2function selectDomElm(obj){ 3 var range = document.createRange(); 4 range.selectNodeContents(obj); 5 var selection = window.getSelection(); 6 selection.removeAllRanges(); 7 selection.addRange(range); 8} 9 10$(function(){ 11 12 $(document).on("click",".box h2", function(){ 13 $('.box h2').next('.bar').animate({'width': '100%'},200); 14 /* ここで #input を選択状態にしたい */ 15 // $('#input').click(); 16 // $('#input').select(); 17 // selectDomElm('#input'); 18 }); 19 20 $(document).on('click',function(e) { 21 if(!$(e.target).closest('.box h2').length) { 22 $('.box').find('.bar').css('width','0'); 23 /* ここで #input の選択状態を解除したい */ 24 } 25 }); 26 27});
###サンプル
https://jsfiddle.net/jcv2axe3/
###ご注意
・#input
をwidth:100%;
にするのはナシです。(★が別の行にいってしまうため。)
・h2
をcontenteditable="true"
にするのもナシです。(★が削除できてしまうため。)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/13 10:00