nuxt.jsでテキストボックスクリック時にテキストを全選択する

2021年6月1日(火) 14時2分16秒 | 118 view |

URLを発行したりしたときにコピーさせやすくするためのアレです



こんなふうにテキストボックスを用意します

<b-input
ref="selectablebox"
readonly
id="inline-form-input-name"
value="コピーしたいテキスト"
@click="select($refs.selectablebox)"
></b-input>


methodsにselect()を作成します

select : function(target){
    if(target.$el){
        target.$el.select();
    }
}


以上。

注意点:
refを利用してその後に$elで参照しているため
Vueコンポーネント化されたDOMに対してのみしか動きません。
なのでデモではbootstrapのb-inputを利用しています。