###実現したいこと
テキストボックスを文字の幅に合わせて可変にしたいです。
###発生している問題
テキストボックスが複数個あるケースで、「全てが連動して変化してしまう」という状況です。
おそらく.get(0)
(JavaScriptのコードの最後から4行目)が問題だと思うのですが、代替手段が分からず質問させて頂きました。
###ソースコート
下記のソースコードの実際のサンプルがこちらです。
https://jsfiddle.net/3pv2y5dj/
add
のクリックでテキストボックスが追加されるのですが、その全てが連動して変化してしまうことがご確認頂けるかと思います。
html
1<ul> 2 <li> 3 <span class="box_width"></span> 4 <input type="text" class="box"> 5 <button type="button" class="del">del</button> 6 </li> 7 <button type="button" id="add">add</button> 8</ul>
javascript
1 /* 追加 */ 2 $(document).on("click","#add", function(){ 3 var box_num = $('li').length; 4 if( box_num <= 3 ){ 5 var box_cnt = parseInt(box_num) + 1; 6 var add_list = ` 7 <li> 8 <span class="box_width"></span> 9 <input type="text" class="box"> 10 <button type="button" class="del">del</button> 11 </li>`; 12 $(this).before($(add_list)); 13 }else{ 14 $('#add').css('display','none'); 15 } 16 }); 17 /* 削除 */ 18 $(document).on("click",".del", function(){ 19 if( $('li').length !== 1 ){ 20 $(this).parent('li').remove(); 21 } 22 if( $('li').length >= 3 ){ 23 $('add').css('display','block'); 24 } 25 }); 26 /* 入力時の横幅 */ 27 $(document).on("input keyup change load",".box", function(){ 28 // 値の取得 29 string = $(this).val(); 30 target = $(this).closest('li').find('.box_width'); 31 widthPixel = strWidth(target,string); 32 // 幅の変更 33 if( widthPixel >= 60 ){ 34 $('.box').css('width',widthPixel+'px'); 35 } 36 }); 37 // 幅の取得関数 38 function strWidth(trg,str) { 39 var width = trg.text(str).get(0).offsetWidth; 40 trg.empty(); 41 return width; 42 }
あと別件ですが、「3個以上になったらadd
を非表示にし、3個未満になったら表示する」という動作もうまく行きません。
以上2点で恐縮ですが、どなたか原因や具体的な対策がお分かりになりましたらご指南頂けませんでしょうか。
どうぞ宜しくお願い致します。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/15 01:44
2019/02/15 01:48
2019/02/15 01:52
2019/02/15 02:49