vue-select-on-focus

vue-select-on-focus

Selects the text contents of inputs, textareas, and contenteditable elements on focus.

Install

$ npm install --save vue-select-on-focus

or

$ yarn add vue-select-on-focus

or include the UMD build, hosted by unpkg in a <script> tag.

<script src="//unpkg.com/vue-select-on-focus" />

Usage

Globally

import Vue from "vue"
import selectOnFocus from "vue-select-on-focus"

Vue.use(selectOnFocus)

Per-component

import selectOnFocus from "vue-select-on-focus"

export default {
  directives: { selectOnFocus },
  template: "<div><input type='text' value='Lorem Ipsum' v-select-on-focus /></div>"
}

The directive will work with any text input, textarea, or contenteditable element.

Passing a custom range

If you don't want to select all the text contents, you can pass in an object with start and end values to the directive.

import selectOnFocus from "vue-select-on-focus"

export default {
  directives: { selectOnFocus },
  template: "<div><input type='text' value='Lorem Ipsum' v-select-on-focus='customRange' /></div>",
  data() {
    return {
      customRange: {
        start: 2,
        end: 5
      }
    }
  }
}

In this example the letters rem would be selected when the input is focused.

Development

# To run the example
$ npm run example

# To run the tests
$ npm test

# To publish the dist file
$ npm run build

License

MIT © Collin Henderson