当前位置：首页 > JavaScript

js实现input

2026-03-14 10:06:40JavaScript

实现基本的HTML input元素

在HTML中创建一个input元素非常简单，使用<input>标签即可。JavaScript可以用来增强其功能。

<input type="text" id="myInput" placeholder="请输入内容">

通过JavaScript获取input值

使用DOM方法获取input元素并读取其值：

const inputElement = document.getElementById('myInput');
const inputValue = inputElement.value;
console.log(inputValue); // 输出输入框中的值

监听input事件

为input元素添加事件监听器，实时响应输入变化：

js实现input

inputElement.addEventListener('input', function(event) {
    console.log('当前输入值:', event.target.value);
});

动态修改input属性

通过JavaScript可以动态修改input的各种属性：

// 修改placeholder
inputElement.placeholder = '新的提示文本';

// 修改输入类型
inputElement.type = 'password';

// 禁用input
inputElement.disabled = true;

表单验证示例

实现一个简单的邮箱格式验证：

js实现input

inputElement.addEventListener('blur', function() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(inputElement.value)) {
        alert('请输入有效的邮箱地址');
        inputElement.focus();
    }
});

自动完成功能

实现一个简单的自动完成功能：

const suggestions = ['apple', 'banana', 'cherry'];
inputElement.addEventListener('input', function() {
    const userInput = this.value.toLowerCase();
    const matched = suggestions.filter(item => 
        item.toLowerCase().includes(userInput)
    );
    console.log('可能的匹配:', matched);
});

限制输入内容

限制只能输入数字：

inputElement.addEventListener('keypress', function(e) {
    if (isNaN(String.fromCharCode(e.keyCode))) {
        e.preventDefault();
    }
});

使用数据绑定

实现简单的双向数据绑定：

const data = {
    text: ''
};

Object.defineProperty(data, 'text', {
    set: function(value) {
        inputElement.value = value;
    },
    get: function() {
        return inputElement.value;
    }
});

inputElement.addEventListener('input', function() {
    data.text = this.value;
});

这些示例展示了JavaScript如何与HTML input元素交互，实现各种常见功能。根据具体需求，可以组合或扩展这些基本模式。