vue获取失去焦点用法

2,469 阅读1分钟

1 autofocus 第一次加载页面自动获取焦点

<input
            type="text"
            placeholder="请输入标题,不超过三个字符"
            class="list-input" 
            autofocus
          />

2 点击div(addtitle)或其他组件,控制v-if或v-model显示input(list-input)并获取焦点,失去焦点时判断字符数,

<div class="addtitle" @click="addtitle"><!--点击事件-->
      <div class="title-list-body">
          <!--失去焦点@blur-->
          <input
            ref="titleinput"
            type="text"
            placeholder="请输入标题,不超过三个字符"
            class="list-input"
            @blur="panduan"
            v-model="newtitle"
          />
     </div>
 </div>
 
 <script>
    export default {
      data() {
           return {
          newtitle: "",
        };
      },
  methods: {
      //获取焦点
        addtitle() {
            //此时autofocus不生效的原因是:
            //   **auto在第一次加载页面时生效,此时input不显示**
            //解决方法:给text一个ref,页面渲染完成后才能获取焦点
                  this.$nextTick(function () {
                        this.$refs.titleinput.focus();
                      });
         },
    
    // 失去焦点判断字符数
    panduan() {
      if (this.newtitle.length > 3) {
        alert("字符不能超过三个!");
        this.newtitle = "";
      }
    },
  },
};
</script>