Like!
JQueryのクリックイベントで複数のテキストを抽出する方法
Q&AClosed
解決したいこと
LaravelにてJQueryを使用してラーニンングアプリを作成しています。
回答欄と選択肢のUI作成に詰まっています。
JQueryのクリックイベントで複数のテキストを取得、出力する方法がわかりません
現状
HTML
<div class="test">
{{-- 回答欄 --}}
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
{{-- 選択肢 --}}
<ul id="Sample">
<li>あ</li>
<li>い</li>
<li>う</li>
<li>え</li>
<li>お</li>
</ul>
</div>
やりたいこと
1.上の任意のinputをクリック(フォーカス)
2.下の任意のliタグをクリック
3.liタグ内の文字をinput内に出力(複数)
JQuery
$('input').focus(function() {
focusedInput = $(this);
});
$('#Sample li').click(function(){
txt = $(this).text();
$(focusedInput).val(txt);
});
現状このJQueryの記述で、クリックしたliタグ内の文字をフォーカスされたinputに出力するところまではできたのですが、
liタグの複数選択→出力の方法がわかりません。
以前はliタグではなくselect、optionタグを使用していたのですが、optionタグの複数選択は融通が効き辛かったので、liタグで挑戦しています。
どなたかご教授頂けますと幸いです。
0
2Answer
1
Comments
@Halchamdao
Questionerありがとうございます!
まさにやりたいこと通りでございます！
重ねて質問で大変申し訳ないのですが、既に選択したものをクリックするとそれを選択から外す仕様は可能なのでしょうか...?- >重ねて質問で大変申し訳ないのですが、既に選択したものをクリックするとそれを選択から外す仕様
組み込んでみました！ @Halchamdao
Questionerありがとうございます！！
感謝感激です！！
自分でもコピペで済まさないで頑張って紐解いて精進致します！！- >自分でもコピペで済まさないで頑張って紐解いて精進致します！！
その姿勢素晴らしいと思います。
コードを追っていてわからないことがあれば、何なりとお申し付けください！ @Halchamdao
Questionerすみません以前教えて頂いたコードに追加機能を試しており、
解答欄(input)も選択中であるものは背景色の変更をしたいと思い、
$('input').focus(function() {
focusedInput = $(this);
DispSelected();
//追記
$(this).addClass('selected_input');
});
//追記
$('input').blur(function() {
$(this).removeClass('selected_input');
});
上記のようにフォーカスの有無で背景色を変えるクラスの追加、削除を記述してみたのですが、
liをクリックした段階でinputのフォーカスが外れてしまい、選択中のinputの背景色が外れてしまうという事象の解決に詰まっております。
お手すきであればご教授頂けますと幸いです。- 元のソースを修正してみました。
フォーカスが外れるタイミングのblurイベントの中で、次のフォーカス先がliタグだと元のテキストボックスにフォーカスを入れるという処理を加えることで実装しています。
「e.relatedTarget」で要素を取得できるようにするためにはフォーカスできる要素でないといけないらしく、基本的にはliタグでは「e.relatedTarget」で取得できないようです。
「tabindex="-1"」をつけることで「e.relatedTarget」として取得できるようになりました。
詳しくはこちらを参考にしてみてください。
https://stackoverflow.com/questions/42764494/blur-event-relatedtarget-returns-null
もっときれいなやり方はあるかもしれませんが、私の力ではこれが限界でした…。 @Halchamdao
Questioner迅速なご回答ありがとうございます！
お陰様で実装できました!
内容が理解できていないので頑張って紐解きます...。- ざっくりいうと、「フォーカス先がリストアイテムだったらフォーカス遷移はなかったことにしよっと」という感じです。
少し複雑になってしまいましたが、引き続き頑張ってください！
補足
複数選択の説明が分かり辛い気がしたので補足です。
例
1.任意のinput(回答欄)をクリック
2.liタグ(選択肢)から「あ」「い」「う」とクリック
3.回答欄にそのまま「あ」「い」「う」と出力される
Like!