input实现js
实现 JavaScript 的 input 功能
在 JavaScript 中，可以通过多种方式实现 input 功能，包括监听用户输入、获取输入框的值以及动态修改输入内容。以下是几种常见的方法：
监听 input 事件
使用 addEventListener 监听 input 事件，可以在用户输入时实时获取输入框的值：
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('input', function(event) {
console.log('当前输入值:', event.target.value);
});获取 input 的值
通过 value 属性可以获取或设置输入框的值：
const inputElement = document.getElementById('myInput');
const currentValue = inputElement.value; // 获取值
inputElement.value = '新值'; // 设置值动态创建 input 元素
可以通过 JavaScript 动态创建 input 元素并添加到 DOM 中：
const newInput = document.createElement('input');
newInput.type = 'text';
newInput.placeholder = '请输入内容';
document.body.appendChild(newInput);表单提交时获取 input 值
在表单提交时，可以通过事件对象或直接获取 input 的值：
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
const inputValue = document.getElementById('myInput').value;
console.log('提交的值:', inputValue);
});限制输入内容
可以通过 input 事件或 keypress 事件限制用户输入的内容：
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('keypress', function(event) {
if (!/[0-9]/.test(event.key)) {
event.preventDefault();
}
});使用 HTML5 的 input 类型
HTML5 提供了多种 input 类型，如 email、number、date 等，可以通过 JavaScript 动态设置：
const inputElement = document.getElementById('myInput');
inputElement.type = 'number';
inputElement.min = 0;
inputElement.max = 100;这些方法涵盖了 JavaScript 中处理 input 的常见场景，可以根据具体需求选择合适的方式。
