テキストエリアに特定の文字を追加したあとに、カーソルの位置が指定できない

Question

前提・実現したいこと

Nuxt.js（Vue.js）で、ハッシュタグの数を数える簡単なシステムを作っています。

その中でワンタップで入力画面（textarea）にハッシュタグ「#」や半角スペース「 」を追加する機能を実装しようとしているのですが、一部うまく行きません。

具体的には、カーソルの位置に合わせて#を追加したら、カーソルの位置をその位置に残したいのですが、現状ではカーソルが外れるまたは一番後ろにフォーカスしてしまっています。

ハッシュタグ（#）を現在のカーソルの位置に追加して、追加したハッシュタグ(#)の後ろにカーソルを合わせたままにするにはどうすれば良いのでしょうか。

元のソースコードを踏まえても、全く別の方法でも構いませんのでご教示いただけると幸いです。

発生している問題・エラーメッセージ

コンソールにエラーは発生していません。

該当のソースコード

CSSフレームワークニVuetifyを利用しています。

v-btn(@click="addHashtag(content)")  #
v-textarea(id="hashtag_input" ref="r" v-model="content" @input="updateValue" maxlength="500")

<script>
export default {

 data () {
    return {
      content:'',
      input_text:'',
    };
 },

methods: {
    // #をワンタップで追加する
    addHashtag(content) {

      var text_val = this.content
      var all_len = text_val.length
      var select_len = hashtag_input.selectionStart
      var first = text_val.substr(0, select_len)
      var insert = '#'
      var latter = text_val.substr(select_len, all_len)
      text_val = first + insert + latter

      this.content = text_val

      // 再描写してからフォーカスする（ここまではできている）
      this.$nextTick(() =>
        this.$refs.r.focus(),
        // フォーカスしてから再度カーソル位置を合わせたいがセレクションレンジが効かない
        this.$refs.r.setSelectionRange(select_len+1,select_len+1),
      )
    },
}
</script>

補足情報（FW/ツールのバージョンなど）

Nuxt.js
Vuetify

###追加情報（2019/8/14 23時頃追記）

どうやら、setSelectionRangeがそもそもうまくいかないようです。

v-btn(@click="cursorNow") テスト

<script>

methods: {
　//これがダメ
　cursorNow() {
      this.$refs.r.focus();
      console.log('カーソルなう')
      this.$refs.r.setSelectionRange(0,9999);
    },

　//これでもダメ
　cursorNow() {
      this.$refs.r.focus();
      this.$nextTick(() => {
        this.$refs.r.setSelectionRange(0,9999);
      });
    },
}
</script>

Answer 1

単にタイポしているだけのような気がします。

this.$refs.r.setSelectionRange(select_len+1,select_len+1)の処理が、this.$nextTick()の第2引数に入ってしまっているので実行されていないだけではないでしょうか？

以下のように書き換えてみてはどうでしょう？

      this.$nextTick(() => {
        this.$refs.r.focus();
        this.$refs.r.setSelectionRange(select_len + 1, select_len + 1);
      });

2019/08/15 追記

以下にVueのプロジェクトを作って同じコードを試してみましたが、この環境だと setSelectionRange
はうまく動いてくれるようです。(Vuetifyは使っていませんが)

変更点はselect_lenをidではなく$refを使って取って来るようにしたぐらいですね。
後は、関係ないですがvarをconstにしたりとか・・・

https://codesandbox.io/s/vue-template-oszsy?fontsize=14

Comments

[utoc11]

ご回答まことにありがとうございます！　記述を変えてみたのですが、やっぱり動かなそうです。

そこでテストのボタンを用意してそもそもsetSelectionRangeが動作するのかを試したのですが、
これがうまくいっていなさそうでした。

もし可能でしたら、追記情報も見ていただけると大変助かります。

[KuwabataK]

codesandboxにサンプルプロジェクトを作って試してみましたが、こちらの環境だとうまくいきました。もしかすると掲示されていないコード部分でなにかバグを踏んでいるのかもしれません

サンプルプロジェクトへのリンクは追記したので確認してみてください

[utoc11]

サンプルプロジェクトまで、本当にありがとうございます。
触ってみましたが、確かにしっかりと動作しますね・・・

以下が私のGithubの該当コードなのですが、こちらで何かわかりますでしょうか・・・。

テキストエリア の入力部分の子コンポーネント
https://github.com/yutoc11/hashtag-counter/blob/master/components/HashtagInput.vue
112行目：ハッシュタグ追加メソッド
質問に入れていないところだと、
32行目：@input="updateValue"　で入力を監視して、
98行目以降でハッシュタグの数を数えているメソッドがあります。

https://github.com/yutoc11/hashtag-counter/blob/master/pages/index.vue
34行目でHashtagInput.vueを読み込み

お手数をおかけしますが、ご確認くださいますと大変嬉しいです。

[utoc11]

理由がわからないのですが、試しにvuetifyのテキストエリア であるv-textareaを廃止したところ、正しく動作しました・・・！

ひとまずのご報告です・・・！

[KuwabataK]

チョット調べてみましたが、たぶん<v-textarea>がhtmlの標準タグである<textarea>をラップしてしまっているので、上記のコードだとsetSelectionRangeとselectionStartが参照できないのが原因っぽいですね

StackOverFlowを参考にして、それぞれ以下のように書き換えると<v-textarea>のままでも動きました

const select_len = this.$refs.r.selectionStart
⇓
const select_len = this.$refs.r.$el.querySelector('textarea').selectionStart

this.$refs.r.setSelectionRange(select_len + 1, select_len + 1);
⇓
this.$refs.r.$el.querySelector('textarea').setSelectionRange(select_len + 1, select_len + 1)

https://stackoverflow.com/questions/52333594/vuetify-how-to-make-setselectionrangeint-int-work-in-v-textarea-when-its-mo

<v-textarea>の内部のDOMを参照するコードなので、<v-textarea>の実装が変わると壊れる可能性があるのであまり良くないですが・・・

まあこれやるぐらいなら自分で<textarea>をCSSで装飾するほうが安全かもしれません

[utoc11]

ご提示いただいたコードで、正しく動作することが確認できました！

確かにそうですよね・・・！
ご丁寧に本当にありがとうございました！