当前位置：首页 > JavaScript

js 实现@某人

2026-02-01 10:19:00JavaScript

实现@某人的功能

在JavaScript中实现@某人功能通常涉及监听用户输入，检测@符号触发，展示用户列表，并插入选中的用户名。以下是具体实现方法：

监听输入事件

使用input或keydown事件监听输入框内容变化。当检测到@符号时，触发用户列表展示：

const inputElement = document.getElementById('commentInput');
inputElement.addEventListener('input', (event) => {
    const text = event.target.value;
    const lastChar = text.slice(-1);

    if (lastChar === '@') {
        showUserList();
    }
});

展示用户列表

动态生成一个下拉列表显示可@的用户。列表通常通过AJAX从服务器获取或使用本地数据：

function showUserList() {
    const userList = ['用户A', '用户B', '用户C']; // 示例数据
    const listContainer = document.createElement('div');
    listContainer.id = 'userListContainer';

    userList.forEach(user => {
        const item = document.createElement('div');
        item.textContent = user;
        item.addEventListener('click', () => insertUserName(user));
        listContainer.appendChild(item);
    });

    document.body.appendChild(listContainer);
}

插入选中用户名

用户点击列表项后，将用户名插入输入框的@符号后，并移除列表：

js 实现@某人

function insertUserName(userName) {
    const inputElement = document.getElementById('commentInput');
    const currentText = inputElement.value;
    const atIndex = currentText.lastIndexOf('@');

    const newText = currentText.slice(0, atIndex + 1) + userName + ' ';
    inputElement.value = newText;

    const listContainer = document.getElementById('userListContainer');
    if (listContainer) listContainer.remove();
}

优化体验

防抖处理：避免频繁触发搜索请求，使用setTimeout延迟搜索。
样式美化：为下拉列表添加CSS样式，使其更美观。
键盘导航：支持上下箭头选择用户，回车确认。

完整示例代码

<input type="text" id="commentInput" placeholder="输入内容...">
<script>
    const inputElement = document.getElementById('commentInput');
    let userListContainer = null;

    inputElement.addEventListener('input', debounce(handleInput, 300));

    function handleInput(event) {
        const text = event.target.value;
        const lastChar = text.slice(-1);

        if (lastChar === '@') {
            fetchUserList();
        } else if (userListContainer) {
            userListContainer.remove();
            userListContainer = null;
        }
    }

    function fetchUserList() {
        const mockUsers = ['Alice', 'Bob', 'Charlie'];
        renderUserList(mockUsers);
    }

    function renderUserList(users) {
        if (userListContainer) userListContainer.remove();

        userListContainer = document.createElement('div');
        userListContainer.style.position = 'absolute';
        userListContainer.style.border = '1px solid #ccc';

        users.forEach(user => {
            const item = document.createElement('div');
            item.textContent = user;
            item.addEventListener('click', () => {
                insertUserName(user);
                userListContainer.remove();
                userListContainer = null;
            });
            userListContainer.appendChild(item);
        });

        document.body.appendChild(userListContainer);
    }

    function insertUserName(userName) {
        const currentText = inputElement.value;
        const atIndex = currentText.lastIndexOf('@');
        inputElement.value = currentText.slice(0, atIndex + 1) + userName + ' ';
        inputElement.focus();
    }

    function debounce(func, delay) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), delay);
        };
    }
</script>