JavaScript 在输入文本填充后启用按钮

本文将介绍如何使用 JavaScript 在输入文本填充后动态启用按钮。我们将通过监听输入框的变化事件来触发检查填充文本逻辑，并根据逻辑结果来启用或禁用按钮。

HTML 结构

首先，我们需要在 HTML 中定义一个输入框和一个按钮以及相应的占位符。

<input type="text" id="input-text" placeholder="输入文本">
<button id="submit-btn" disabled>提交</button>

注意，我们在按钮的初始状态中将其禁用，因为初始时输入框中没有文本。

JavaScript 逻辑

我们将使用 JavaScript 来监听输入框的变化事件，并根据输入文本是否为空来决定按钮的启用状态。

// 获取输入框和按钮元素
const inputText = document.getElementById('input-text');
const submitBtn = document.getElementById('submit-btn');

// 监听输入框的变化事件
inputText.addEventListener('input', () => {
  // 检查输入文本是否为空
  if (inputText.value.trim() !== '') {
    submitBtn.disabled = false; // 启用按钮
  } else {
    submitBtn.disabled = true; // 禁用按钮
  }
});

在上述代码中，我们首先通过 getElementById 方法获取输入框和按钮的 DOM 元素，然后使用 addEventListener 方法监听输入框的 input 事件。每次输入框的内容发生变化时，我们都会触发回调函数。在回调函数中，我们使用 trim 方法去掉输入文本的前后空格，并通过比较结果来决定按钮的启用状态。

最后，我们使用 disabled 属性来启用或禁用按钮。

效果演示

在输入框中输入文本后，按钮将根据文本是否为空来动态启用或禁用。

总结

通过 JavaScript 监听输入框的变化事件，我们可以实现在输入文本填充后动态启用按钮的功能。以上是一个简单的示例，你可以根据实际需求进行扩展和优化。

返回的代码片段按 markdown 格式如下所示：

## HTML 结构

```html
<input type="text" id="input-text" placeholder="输入文本">
<button id="submit-btn" disabled>提交</button>

JavaScript 逻辑

// 获取输入框和按钮元素
const inputText = document.getElementById('input-text');
const submitBtn = document.getElementById('submit-btn');

// 监听输入框的变化事件
inputText.addEventListener('input', () => {
  // 检查输入文本是否为空
  if (inputText.value.trim() !== '') {
    submitBtn.disabled = false; // 启用按钮
  } else {
    submitBtn.disabled = true; // 禁用按钮
  }
});

效果演示

在输入框中输入文本后，按钮将根据文本是否为空来动态启用或禁用。