当前位置：首页 > JavaScript

js实现input

2026-02-01 11:25:18JavaScript

实现基本的Input元素

使用HTML和JavaScript创建一个基本的input元素非常简单。以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Input示例</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="请输入内容">

    <script>
        const inputElement = document.getElementById('myInput');

        inputElement.addEventListener('change', function() {
            console.log('输入内容:', this.value);
        });
    </script>
</body>
</html>

监听不同事件类型

input元素可以监听多种事件类型，根据需求选择合适的：

const input = document.getElementById('myInput');

// 输入时实时触发
input.addEventListener('input', function(e) {
    console.log('实时输入:', e.target.value);
});

// 失去焦点时触发
input.addEventListener('blur', function() {
    console.log('失去焦点时的值:', input.value);
});

// 获得焦点时触发
input.addEventListener('focus', function() {
    console.log('获得焦点');
});

表单验证实现

JavaScript可以实现客户端表单验证：

const form = document.getElementById('myForm');
const emailInput = document.getElementById('email');

form.addEventListener('submit', function(e) {
    e.preventDefault();

    if(!validateEmail(emailInput.value)) {
        alert('请输入有效的邮箱地址');
        emailInput.focus();
        return false;
    }

    // 表单提交逻辑
});

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

自动完成功能

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

js实现input

const input = document.getElementById('search');
const suggestions = ['苹果', '香蕉', '橙子', '葡萄'];

input.addEventListener('input', function() {
    const userInput = this.value.toLowerCase();
    const filtered = suggestions.filter(item => 
        item.toLowerCase().includes(userInput)
    );

    showSuggestions(filtered);
});

function showSuggestions(items) {
    // 显示建议列表的逻辑
    console.log('建议:', items);
}

输入限制

限制输入内容的类型或长度：

const numericInput = document.getElementById('numericInput');

numericInput.addEventListener('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '');
});

const maxLengthInput = document.getElementById('maxLengthInput');
maxLengthInput.addEventListener('input', function() {
    if(this.value.length > 10) {
        this.value = this.value.substring(0, 10);
    }
});

自定义样式Input

通过JavaScript增强input的样式和功能：

js实现input

const styledInput = document.getElementById('styledInput');
const clearBtn = document.getElementById('clearBtn');

styledInput.addEventListener('input', function() {
    clearBtn.style.display = this.value ? 'block' : 'none';
});

clearBtn.addEventListener('click', function() {
    styledInput.value = '';
    this.style.display = 'none';
    styledInput.focus();
});

文件输入处理

处理文件类型的input：

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function() {
    const file = this.files[0];
    if(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
        }
        reader.readAsDataURL(file);
    }
});

响应式输入

根据输入内容动态调整界面：

const dynamicInput = document.getElementById('dynamicInput');
const charCount = document.getElementById('charCount');

dynamicInput.addEventListener('input', function() {
    const remaining = 100 - this.value.length;
    charCount.textContent = `${remaining}字符剩余`;
    charCount.style.color = remaining < 20 ? 'red' : 'black';
});

跨浏览器兼容性

确保代码在不同浏览器中正常工作：

function getInputValue(input) {
    return input.value || input.textContent;
}

function setInputValue(input, value) {
    if('value' in input) {
        input.value = value;
    } else {
        input.textContent = value;
    }
}

这些示例涵盖了JavaScript处理input元素的常见场景，可以根据具体需求进行组合和扩展。