jsでフォームに自動入力する
前回の続き
- jqueryの導入していない
- bootstrapの導入していない
- ruby ver 3.1
- rails ver 6.1
javascriptファイルを用意
- app/javascript/myscript.jsを作成
app/javascript/packs/aplication.js
:
:
@import "myscript"
:
:
myscript.js
//ターボリンクをloadしないと、うまく動かない
document.addEventListener('turbolinks:load', () => {
// テキストボックスを取得
const tagInput = document.querySelector('input[name="item[tag_name]"]');
// タグをクリックした時の処理
const tagLinks = document.querySelectorAll('.tag-link');
tagLinks.forEach(link => {
link.addEventListener('click', (e) => {
// リンクのデフォルト動作を無効化
e.preventDefault();
// テキストボックスの内容にタグを追加
const clickedTag = e.target.innerText.trim();
if (tagInput.value) {
tagInput.value = `${tagInput.value} ${clickedTag}`;
} else {
tagInput.value = clickedTag;
}
});
});
//フォーム内を空にする処理
const clearButton = document.querySelector('#clear-button');
// クリアボタンをクリックした時の処理
clearButton.addEventListener('click', (e) => {
// テキストボックスを空にする
tagInput.value = '';
});
});
addEventListener
クリックされた時に実行される。
引数の e はクリックされた要素に関する情報が格納される Event オブジェクト
e.preventDefaul
クリックしたタグのデフォルトの動作（ページを遷移させること）をキャンセルする
e.target.innerText.trim()
イベントが発生した要素の、テキストを取得し、trim()で前後の空白を除いた文字列を扱う
部分テンプレート化
tags/add_tag.html.erb
<% tag_list.each do |tag| %>
<div><%#= tag_list.tag_name + " " %>
<%= link_to tag.tag_name, '#', class: 'tag-link' %>
</div>
<% end %>
投稿ページに貼り付ける。
new.html.erb
:
:
:
<button id="clear-button" type="button">クリア</button>
<p>タグをクリックすると、フォームに自動で追加されます</p>
<div>
<%= render "tags/add_tag", tag_list: @tag_list %>
</div>
同じく、editにも貼り付ける
終わり
端折ったので、もしかしたらうまく動かない場合がありますがご了承ください。
js難しすぎる！！！
イベントリスナーやプロパティが覚えられないよう。
GPT先生に教わりながら実装したけど、理解が追いつかない。
とりあえず、タグの試作は終わったので、ポートフォリオ用のECサイト制作に取り掛かります。