如何根据textfield文本框内容动态修改按钮显示文本？

核心实现逻辑分为两步：

• 监听文本框输入事件，根据内容是否为空动态切换按钮显示文本
• 绑定按钮点击事件，触发时清空文本框内容，自动切换按钮为AC状态

原生HTML+JS实现（无框架依赖） #

<!-- 页面结构 -->
<input type="text" id="inputField" placeholder="请输入内容">
<button id="controlBtn">AC</button>

<script>
// 绑定DOM元素
const inputField = document.getElementById('inputField')
const controlBtn = document.getElementById('controlBtn')

// 监听文本框输入，动态切换按钮文本
inputField.addEventListener('input', () => {
  const hasContent = inputField.value.trim() !== ''
  controlBtn.innerText = hasContent ? 'C' : 'AC'
})

// 监听按钮点击，清空文本框
controlBtn.addEventListener('click', () => {
  inputField.value = ''
  controlBtn.innerText = 'AC'
  // 可选：清空后自动聚焦回文本框
  inputField.focus()
})
</script>

常用框架实现示例 #

Vue3 实现 #

<template>
  <input v-model.trim="inputVal" type="text" placeholder="请输入内容">
  <button @click="inputVal = ''">
    {{ inputVal ? 'C' : 'AC' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'
const inputVal = ref('')
</script>

React 实现 #

import { useState } from 'react'

export default function InputControl() {
  const [inputVal, setInputVal] = useState('')

  return (
    <>
      <input 
        type="text" 
        value={inputVal} 
        onChange={(e) => setInputVal(e.target.value.trim())}
        placeholder="请输入内容"
      />
      <button onClick={() => setInputVal('')}>
        {inputVal ? 'C' : 'AC'}
      </button>
    </>
  )
}

如果业务场景不需要过滤仅输入空格的情况，直接去掉上述代码中的trim()方法即可。

内容的提问来源于stack exchange，提问作者Azad Hossain