input实现js
实现 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 事件，阻止默认提交行为并自定义逻辑：
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 的禁用状态：
// 禁用
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>
