🏴󠁧󠁢󠁷󠁬󠁳󠁿

resources/assets/js/checkin.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import TagInput from "./components/TagInput.vue";
 import MetadataPreview from './components/MetadataPreview.vue';
+import GraphemeSplitter from "grapheme-splitter";
 
 export const bus = new Vue({name: "EventBus"});
 
@@ -16,6 +17,7 @@ new Vue({
     data: {
         metadata: null,
         metadataLoadState: MetadataLoadState.Inactive,
+        noteLength: 0
     },
     components: {
         TagInput,
@@ -28,6 +30,16 @@ new Vue({
             this.fetchMetadata(linkInput.value);
         }
     },
+    watch: {
+        noteLength: (length: number) => {
+            const counter = document.querySelector<HTMLElement>(
+                "#note-character-counter"
+            );
+            if (counter) {
+                counter.innerText = `残り ${500 - length} 文字`;
+            }
+        }
+    },
     methods: {
         // オカズリンクの変更時
         onChangeLink(event: Event) {
@@ -43,6 +55,14 @@ new Vue({
                 this.fetchMetadata(url);
             }
         },
+        onChangeNote(event: Event) {
+            if (event.target instanceof HTMLTextAreaElement) {
+                const splitter = new GraphemeSplitter();
+                this.noteLength = splitter.splitGraphemes(
+                    event.target.value
+                ).length;
+            }
+        },
         // メタデータの取得
         fetchMetadata(url: string) {
             this.metadataLoadState = MetadataLoadState.Loading;

resources/views/ejaculation/checkin.blade.php

@@ -67,8 +67,8 @@
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
-                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4">{{ old('note') ?? $defaults['note'] }}</textarea>
-                        <small class="form-text text-muted">
+                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4" v-on:input="onChangeNote">{{ old('note') ?? $defaults['note'] }}</textarea>
+                        <small id="note-character-counter" class="form-text text-muted">
                             最大 500 文字
                         </small>
                         @if ($errors->has('note'))

resources/views/ejaculation/edit.blade.php

@@ -68,8 +68,8 @@
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
-                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4">{{ old('note') ?? $ejaculation->note }}</textarea>
-                        <small class="form-text text-muted">
+                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4" v-on:input="onChangeNote">{{ old('note') ?? $ejaculation->note }}</textarea>
+                        <small id="note-character-counter" class="form-text text-muted">
                             最大 500 文字
                         </small>
                         @if ($errors->has('note'))