uniapp中 聚焦输入框时选中输入的文本

Question

uniapp 的内置组件 uni-number-box 怎么在聚焦或者输入的时候选中输入的数字，让用户覆盖输入，不用去删除

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

uni-app 中的 uni-number-box 组件可以通过以下方式实现聚焦时选中输入的文本：

1. 在 uni-number-box 组件的 input 事件中，获取焦点时，使用 select() 方法选中输入的文本。
2. 或者，在 uni-number-box 组件的 focus 事件中，使用 select() 方法选中输入的文本。

示例代码

<template>
  <uni-number-box @input="handleInput" @focus="handleFocus" />
</template>

<script>
export default {
  methods: {
    handleInput(e) {
      console.log(e)
    },
    handleFocus(e) {
      e.target.select() // 选中输入的文本
    }
  }
}
</script>

注意

• select() 方法会选中输入的文本，但不会覆盖输入的内容。
• 如果你需要覆盖输入的内容，可以在 input 事件中使用 e.target.value = '' 来清空输入的内容，然后再输入新的内容。

希望这个解决方案能够帮助你解决问题！