iOS风格密码输入框

创建一个封装好的函数，用于弹出iOS风格的密码输入框。这个实现会包含蒙版、取消按钮和炫酷的动画效果，同时避免样式冲突。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iOS风格密码输入框</title>
    <style>
        /* 基础样式重置，防止冲突 */
        .ios-password-modal * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        /* 蒙版样式 */
        .ios-password-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .ios-password-modal.active {
            opacity: 1;
            pointer-events: all;
        }
        
        /* 对话框容器 */
        .ios-password-container {
            width: 270px;
            background-color: #f8f8f8;
            border-radius: 13px;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .ios-password-modal.active .ios-password-container {
            transform: scale(1);
        }
        
        /* 标题样式 */
        .ios-password-title {
            padding: 15px;
            text-align: center;
            font-size: 17px;
            font-weight: 600;
            color: #000;
            border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
        }
        
        /* 输入框样式 */
        .ios-password-input {
            padding: 15px;
            border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
        }
        
        .ios-password-input input {
            width: 100%;
            padding: 12px 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 16px;
            background-color: #fff;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .ios-password-input input:focus {
            border-color: #007AFF;
        }
        
        /* 按钮容器 */
        .ios-password-buttons {
            display: flex;
            border-top: 0.5px solid rgba(0, 0, 0, 0.1);
        }
        
        /* 按钮样式 */
        .ios-password-button {
            flex: 1;
            padding: 15px;
            text-align: center;
            font-size: 17px;
            font-weight: 500;
            color: #007AFF;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .ios-password-button:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        
        .ios-password-button.cancel {
            color: #FF3B30;
            border-right: 0.5px solid rgba(0, 0, 0, 0.1);
        }
        
        /* 炫酷动画 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        .ios-password-container.shake {
            animation: shake 0.5s;
        }
    </style>
</head>
<body>
    <button onclick="showPasswordPrompt('请输入密码查看内容', function(pwd) { alert('您输入的密码是: ' + pwd); })">点击弹出密码框</button>

    <script>
        /**
         * 显示iOS风格的密码输入框
         * @param {string} title - 对话框标题
         * @param {function} callback - 密码输入后的回调函数
         */
        function showPasswordPrompt(title, callback) {
            // 创建蒙版和对话框
            const modal = document.createElement('div');
            modal.className = 'ios-password-modal';
            
            const container = document.createElement('div');
            container.className = 'ios-password-container';
            
            // 创建标题
            const titleElement = document.createElement('div');
            titleElement.className = 'ios-password-title';
            titleElement.textContent = title || '请输入密码';
            
            // 创建输入框
            const inputContainer = document.createElement('div');
            inputContainer.className = 'ios-password-input';
            
            const input = document.createElement('input');
            input.type = 'password';
            input.placeholder = '密码';
            
            inputContainer.appendChild(input);
            
            // 创建按钮
            const buttons = document.createElement('div');
            buttons.className = 'ios-password-buttons';
            
            const cancelButton = document.createElement('div');
            cancelButton.className = 'ios-password-button cancel';
            cancelButton.textContent = '取消';
            
            const confirmButton = document.createElement('div');
            confirmButton.className = 'ios-password-button';
            confirmButton.textContent = '确定';
            
            buttons.appendChild(cancelButton);
            buttons.appendChild(confirmButton);
            
            // 组装对话框
            container.appendChild(titleElement);
            container.appendChild(inputContainer);
            container.appendChild(buttons);
            modal.appendChild(container);
            
            // 添加到body
            document.body.appendChild(modal);
            
            // 显示对话框
            setTimeout(() => {
                modal.classList.add('active');
                input.focus();
            }, 10);
            
            // 取消按钮点击事件
            cancelButton.onclick = function() {
                closeModal();
            };
            
            // 确定按钮点击事件
            confirmButton.onclick = function() {
                if (input.value.trim() === '') {
                    // 输入为空时添加抖动效果
                    container.classList.add('shake');
                    setTimeout(() => {
                        container.classList.remove('shake');
                    }, 500);
                    return;
                }
                
                if (callback && typeof callback === 'function') {
                    callback(input.value);
                }
                closeModal();
            };
            
            // 蒙版点击事件
            modal.onclick = function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            };
            
            // 回车键提交
            input.onkeydown = function(e) {
                if (e.key === 'Enter') {
                    confirmButton.click();
                }
            };
            
            // 关闭对话框
            function closeModal() {
                modal.classList.remove('active');
                setTimeout(() => {
                    document.body.removeChild(modal);
                }, 300);
            }
        }
    </script>
</body>
</html>

这个实现包含以下特点：

iOS风格设计：圆角、半透明蒙版、系统字体等iOS特有设计元素
炫酷动画：
- 淡入淡出效果
- 缩放动画
- 输入错误时的抖动效果
防止样式冲突：
- 所有元素都带有特定前缀类名
- 重置了内部元素的默认样式
完整功能：
- 密码输入框
- 取消/确定按钮
- 蒙版点击关闭
- 回车键提交
封装良好：通过showPasswordPrompt函数调用，传入标题和回调函数即可使用

你可以直接复制这段代码到HTML文件中使用，或者将其中的函数和样式提取到你的项目中。

iOS风格密码输入框

相关推荐

备忘录弹出层函数

智能表单提交系统