Implementation of element input box automatically getting focus

When making a form in a recent project, I need to automatically scroll to the comment box and make the comment box automatically focused, which requires manually triggering the focus state of the input box.

However, element does not support the autofocus attribute, so you can only get the focus effect through native js effects.

document.getElementById("input").focus();

Or you can use the ref attribute of vue to achieve the focusing effect:

The principle is actually very simple. Element already provides a focus method, but the documentation does not specify how to call it. The following is to add a ref attribute to the el-input tag, and then call the method directly where needed.

<el-input v-model="input" placeholder="Please enter content" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

Note: A page can only have one focus effect

Last, vue also supports custom instructions

When the page loads, the element will receive focus (note: autofocus does not work on mobile Safari). In fact, as long as you haven't clicked anything since opening the page, the input box should still be in focus. Now let's implement this functionality using instructions:

// Register a global custom directive `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus element el.focus()
    //element-ui
    el.children[0].focus()
    // If the element changes, such as show or parent element changes, you can add a delay or judge setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

Reference: vue custom directive https://cn.vuejs.org/v2/guide/custom-directive.html

This is the end of this article about how to automatically get the focus of the element input box. For more information about how to automatically get the focus of the element input box, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!