質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1156閲覧

複数のテキストボックスで、幅が連動して変化してしまう

handhandy

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/15 01:23

編集2019/02/15 01:33

###実現したいこと
テキストボックスを文字の幅に合わせて可変にしたいです。
###発生している問題
テキストボックスが複数個あるケースで、「全てが連動して変化してしまう」という状況です。

おそらく.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点で恐縮ですが、どなたか原因や具体的な対策がお分かりになりましたらご指南頂けませんでしょうか。

どうぞ宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

//hereを書きかえました。

javascript

1 /* 入力時の横幅 */ 2 $(document).on("input keyup change load",".box", function(){ 3 // 値の取得 4 string = $(this).val(); 5 target = $(this).closest('li').find('.box_width'); 6 widthPixel = strWidth(target,string); 7 // 幅の変更 8 if( widthPixel >= 60 ){ 9 $(this).css('width',widthPixel+'px'); //here 10 } 11 });
  • add 3

3個になった時点で消すには、こういう風に追加後に、「消したい条件なら」「消す」とする

javascript

1 /* 追加 */ 2 $(document).on("click","#add", function(){ 3 var tag_cnt = parseInt(tag_num) + 1; 4 var add_list = ` 5 <li> 6 <span class="box_width"></span> 7 <input type="text" class="box"> 8 <button type="button" class="del">del</button> 9 </li>`; 10 $(this).before($(add_list)); 11 var tag_num = $('li').length; //here 12 if( tag_num >= 3 ){ 13 $('#add').css('display','none'); 14 } 15 });
  • del

javascript

1 /* 削除 */ 2 $(document).on("click",".del", function(){ 3 if( $('li').length !== 1 ){ 4 $(this).parent('li').remove(); 5 } 6 if( $('li').length < 3 ){ //here 判定の不等号がおかしい 7 $('#add').css('display','block'); //here #がない 8 } 9 });

最終状態

javascript

1 /* 追加 */ 2 $(document).on("click","#add", function(){ 3 var tag_cnt = parseInt(tag_num) + 1; 4 var add_list = ` 5 <li> 6 <span class="box_width"></span> 7 <input type="text" class="box"> 8 <button type="button" class="del">del</button> 9 </li>`; 10 $(this).before($(add_list)); 11 var tag_num = $('li').length; 12 if( tag_num >= 3 ){ 13 $('#add').css('display','none'); 14 } 15 }); 16 /* 削除 */ 17 $(document).on("click",".del", function(){ 18 if( $('li').length !== 1 ){ 19 $(this).parent('li').remove(); 20 } 21 if( $('li').length < 3 ){ 22 $('#add').css('display','block'); 23 } 24 }); 25 /* 入力時の横幅 */ 26 $(document).on("input keyup change load",".box", function(){ 27 string = $(this).val(); 28 target = $(this).closest('li').find('.box_width'); 29 widthPixel = strWidth(target,string); 30 // 幅変更 31 if( widthPixel >= 60 ){ 32 $(this).css('width',widthPixel+'px'); 33 } 34 }); 35 function strWidth(trg,str) { 36 var width = trg.text(str).get(0).offsetWidth; 37 trg.empty(); 38 return width; 39 }

投稿2019/02/15 01:36

編集2019/02/15 01:45
papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2019/02/15 01:44

jsfiddleで上記3つの編集をしたところ、質問仕様で動作するようになりました。
handhandy

2019/02/15 01:48

ありがとうございます。とてもいい感じに仕上げて頂きました。 「質問仕様で」とあえて仰ってますが、何か気になる点などがございますでしょうか?
papinianus

2019/02/15 01:52

質問の仕様がかわる質問者様がいらっしゃるからです(ここまでできたら次ってなっていく方ならまだいいのですが、作ってみた結果思った動作じゃないということで全然違う話になる方がいらっしゃるので) 気になる点としては、 ・質問に関連してないので良くみてませんがspanが何やってるのか分からない(そこにwidthをもつ理由がまだ分かってない) ・madoka9393様がおっしゃるようにidを付与するような指定が一般的(たとえばこれをどこかにsubmitするとか考えると)かな のあたり
handhandy

2019/02/15 02:49

ありがとうございます。ひとまず次にいってますが、特に問題なさそうです。そのご心労、至らない質問者のひとりとして、多少なりともお察しいたします。σ(^_^;) spanに移している理由ですよね。どのサイトだったか失念してしまいましたが、どうやらこうしないと記号などのときに正しく幅が取れないのだと書いてあったような気がします。 id付与の方も大丈夫そうです。最後までそのお心遣いに深く感謝申し上げます。
guest

0

$('.box').css('width',widthPixel+'px');
とクラス名指定でCSSの設定をしてしまっているためですね。

テキストボックスを追加する際に一意になるようなidを付与するか、
CSSを設定する際に、以下のようにどの.boxに対して設定するのかを明示的にしてあげればよいかと。
$(this).closest('li').find('.box').css('width',widthPixel+'px');

投稿2019/02/15 01:32

編集2019/02/15 02:15
madoka9393

総合スコア992

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

handhandy

2019/02/15 01:46 編集

なるほどー。ありがとうです!
madoka9393

2019/02/15 01:49

回答編集中だったけど先に papinianus 様の回答が成ったようなのでこちらはここまでで。 (内容的にも同じものでしたので)
madoka9393

2019/02/15 02:08

(よくよく考えたらid付与は今回のcssを設定する要素を明示的にする部分とは関係ないな?)
guest

0

23行目のaddの前に#が足りてないですね。

あと33行目のCSSを設定する対象がおかしいです。
ここは$(this).cssが妥当かと思います。

投稿2019/02/15 01:41

n_takapyon

総合スコア443

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問