当前位置：首页 > JavaScript

input实现js

2026-01-31 22:50:03JavaScript

实现 input 元素的 JavaScript 交互

监听 input 事件
通过 addEventListener 监听 input 元素的输入变化，实时获取用户输入的值：

const inputElement = document.querySelector('input');
inputElement.addEventListener('input', (event) => {
  console.log(event.target.value); // 实时输出输入内容
});

获取和设置 input 值
使用 value 属性动态读取或修改 input 的内容：

// 获取值
const currentValue = inputElement.value;

// 设置值
inputElement.value = '默认文本';

表单提交处理
监听表单的 submit 事件，阻止默认提交行为并自定义逻辑：

input实现js

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止默认提交
  console.log('提交的值:', inputElement.value);
});

验证输入内容
结合 pattern 属性或正则表达式进行输入验证：

inputElement.addEventListener('change', () => {
  const isValid = /^[A-Za-z]+$/.test(inputElement.value);
  if (!isValid) {
    alert('请输入字母');
  }
});

动态禁用/启用 input
通过 JavaScript 控制 input 的禁用状态：

input实现js

// 禁用
inputElement.disabled = true;

// 启用
inputElement.disabled = false;

焦点控制
使用 focus() 和 blur() 方法管理焦点：

inputElement.focus(); // 聚焦到 input
inputElement.blur();  // 移除焦点

响应键盘事件
监听 keydown 或 keyup 事件实现特定按键响应：

inputElement.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('按下了回车键');
  }
});

实际应用示例

以下是一个完整的示例，结合了输入监听、验证和提交：

<input type="text" id="username" placeholder="输入用户名">
<button id="submit">提交</button>

<script>
  const usernameInput = document.getElementById('username');
  const submitButton = document.getElementById('submit');

  usernameInput.addEventListener('input', (event) => {
    console.log('当前输入:', event.target.value);
  });

  submitButton.addEventListener('click', () => {
    if (usernameInput.value.trim() === '') {
      alert('用户名不能为空');
    } else {
      alert(`提交成功: ${usernameInput.value}`);
    }
  });
</script>