vue js 点击按钮为当前获得焦点的输入框输入值

最新推荐文章于 2024-05-04 23:53:56 发布

陌生的L君

最新推荐文章于 2024-05-04 23:53:56 发布

阅读量1.1k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_34157798/article/details/120951784

版权

vue js 点击按钮为当前获得焦点的输入框输入值

使用mousedown方法，可以阻止页面将焦点转移到按钮上

<el-button @mousedown.native="entrySymbol($event,'+')">+</el-button>

获取当前拥有焦点的输入框或文本域，并为其赋值

    //输入符号
    entrySymbol(e, symbol) {
      //取消失去焦点事件
      e.preventDefault()
      //获取当前焦点元素
      const activeNode = document.activeElement
      //为当前焦点元素赋值
      if (activeNode?.nodeName === 'INPUT' || activeNode.nodeName === 'TEXTAREA') {
        activeNode.value += symbol
      }
    }

封装好的组件
focus-button.vue

<template>
  <el-button @mousedown.native="entrySymbol($event,label||value)">{{ label }}</el-button>
</template>

<script>
export default {
  name: 'focusButton',
  props: {
    label: String,
    value: String
  },
  methods: {
    //输入符号
    entrySymbol(e, symbol) {
      //取消失去焦点事件
      e.preventDefault()
      //获取当前焦点元素
      const activeNode = document.activeElement
      //为当前焦点元素赋值
      if (activeNode?.nodeName === 'INPUT' || activeNode.nodeName === 'TEXTAREA') {
        activeNode.value += symbol
      }
    }
  }
}
</script>

<style scoped>

</style>

focus-button.vue

<template>
  <!--  焦点按钮组  -->
  <div>
    <focus-button v-if="buttons.length" :label="btn.label||btn" :value="btn.value" v-for="btn in buttons"/>
  </div>
</template>

<script>
import FocusButton from '@/components/focusButton/focusButton'

export default {
  name: 'focusButtonGroup',
  components: { FocusButton },
  props: {
    buttons: Array
  }
}
</script>

<style scoped>

</style>