|
@@ -1,277 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
|
|
-<html lang="zh-CN">
|
|
|
|
|
-<head>
|
|
|
|
|
- <meta charset="UTF-8">
|
|
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
- <title>输入框宽度测试</title>
|
|
|
|
|
- <style>
|
|
|
|
|
- * {
|
|
|
|
|
- margin: 0;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- body {
|
|
|
|
|
- background: #000;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-family: Arial, sans-serif;
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .container {
|
|
|
|
|
- max-width: 400px;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- padding-top: 50px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .x-f {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .justify-between {
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .input-container-optimized {
|
|
|
|
|
- background: #393939;
|
|
|
|
|
- padding: 5px 7px 5px 16px;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- border-radius: 18px;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- transform: translateZ(0);
|
|
|
|
|
- will-change: transform;
|
|
|
|
|
- backface-visibility: hidden;
|
|
|
|
|
- perspective: 1000px;
|
|
|
|
|
- /* 移除transition动画，避免闪动 */
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 输入框容器焦点状态 - 当输入框聚焦时扩展宽度 */
|
|
|
|
|
- .input-container-optimized.input-container-focused,
|
|
|
|
|
- .input-container-focused {
|
|
|
|
|
- width: calc(100% - 20px) !important;
|
|
|
|
|
- max-width: calc(100% - 20px) !important;
|
|
|
|
|
- min-width: calc(100% - 20px) !important;
|
|
|
|
|
- margin-right: 20px !important;
|
|
|
|
|
- padding: 10px 10px 10px 20px !important;
|
|
|
|
|
- justify-content: flex-start !important;
|
|
|
|
|
- gap: 20px !important;
|
|
|
|
|
- flex: 1 !important;
|
|
|
|
|
- flex-grow: 1 !important;
|
|
|
|
|
- flex-shrink: 0 !important;
|
|
|
|
|
- flex-basis: calc(100% - 20px) !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 父级容器焦点状态 - 当输入框聚焦时调整整体布局 */
|
|
|
|
|
- .parent-container-focused {
|
|
|
|
|
- justify-content: flex-start !important;
|
|
|
|
|
- align-items: stretch !important;
|
|
|
|
|
- width: 100% !important;
|
|
|
|
|
- display: flex !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 更强的父级容器控制 */
|
|
|
|
|
- .justify-between.p24.parent-container-focused {
|
|
|
|
|
- justify-content: flex-start !important;
|
|
|
|
|
- align-items: stretch !important;
|
|
|
|
|
- width: 100% !important;
|
|
|
|
|
- display: flex !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 调试用 - 强制容器宽度 */
|
|
|
|
|
- .input-container-optimized.input-container-focused[class*="input-container-focused"] {
|
|
|
|
|
- width: 100% !important;
|
|
|
|
|
- max-width: 100% !important;
|
|
|
|
|
- min-width: 100% !important;
|
|
|
|
|
- flex: 1 1 100% !important;
|
|
|
|
|
- box-sizing: border-box !important;
|
|
|
|
|
- background-color: rgba(255, 0, 0, 0.1) !important; /* 调试用红色背景 */
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 确保焦点状态下不使用justify-between */
|
|
|
|
|
- .input-container-optimized.input-container-focused.justify-between {
|
|
|
|
|
- justify-content: flex-start !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 强制输入框宽度设置 - 最高优先级 */
|
|
|
|
|
- .input-container-optimized.input-container-focused .input-optimized.input-focused,
|
|
|
|
|
- .input-container-optimized .input-optimized.input-focused,
|
|
|
|
|
- .input-optimized.input-focused[class*="input-focused"] {
|
|
|
|
|
- width: auto !important;
|
|
|
|
|
- flex: 1 !important;
|
|
|
|
|
- min-width: 0 !important;
|
|
|
|
|
- max-width: none !important;
|
|
|
|
|
- flex-grow: 1 !important;
|
|
|
|
|
- flex-shrink: 1 !important;
|
|
|
|
|
- flex-basis: 0 !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .input-optimized {
|
|
|
|
|
- border: none !important;
|
|
|
|
|
- font-size: 16px !important;
|
|
|
|
|
- color: #ffffff !important;
|
|
|
|
|
- background: transparent !important;
|
|
|
|
|
- width: 70% !important;
|
|
|
|
|
- outline: none;
|
|
|
|
|
- /* 移除transition动画，避免闪动 */
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .input-optimized.input-focused {
|
|
|
|
|
- width: auto !important;
|
|
|
|
|
- flex: 1 !important;
|
|
|
|
|
- min-width: 0 !important;
|
|
|
|
|
- margin-left: 5px !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .send {
|
|
|
|
|
- background-color: #fafafa;
|
|
|
|
|
- border-radius: 14px;
|
|
|
|
|
- padding: 7px 8px;
|
|
|
|
|
- color: #181818;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- min-width: 40px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shopping-icon-container {
|
|
|
|
|
- margin-right: 8px;
|
|
|
|
|
- /* 移除transition动画，避免显示/隐藏时闪烁 */
|
|
|
|
|
- will-change: opacity, visibility;
|
|
|
|
|
- backface-visibility: hidden;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shopping-icon-container.hidden {
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- visibility: hidden;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .icon-bg {
|
|
|
|
|
- width: 30px;
|
|
|
|
|
- height: 30px;
|
|
|
|
|
- background: #666;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .status {
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
- padding: 10px;
|
|
|
|
|
- background: #333;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- }
|
|
|
|
|
- </style>
|
|
|
|
|
-</head>
|
|
|
|
|
-<body>
|
|
|
|
|
- <div class="container">
|
|
|
|
|
- <div class="status">
|
|
|
|
|
- <p>状态: <span id="status">未聚焦</span></p>
|
|
|
|
|
- <p>输入框宽度: <span id="width">70%</span></p>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="x-f justify-between" id="parentContainer">
|
|
|
|
|
- <div class="x-f input-container-optimized" id="inputContainer">
|
|
|
|
|
- <input
|
|
|
|
|
- id="testInput"
|
|
|
|
|
- placeholder="点击测试输入框宽度变化"
|
|
|
|
|
- class="input-optimized"
|
|
|
|
|
- style="margin-left: 10px;"
|
|
|
|
|
- />
|
|
|
|
|
- <div class="send" onclick="sendMsg()">发送</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="shopping-icon-container" id="shoppingIcon">
|
|
|
|
|
- <div class="icon-bg">🛒</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <script>
|
|
|
|
|
- const input = document.getElementById('testInput');
|
|
|
|
|
- const container = document.getElementById('inputContainer');
|
|
|
|
|
- const shoppingIcon = document.getElementById('shoppingIcon');
|
|
|
|
|
- const statusEl = document.getElementById('status');
|
|
|
|
|
- const widthEl = document.getElementById('width');
|
|
|
|
|
-
|
|
|
|
|
- let isFocus = false;
|
|
|
|
|
-
|
|
|
|
|
- function updateStatus() {
|
|
|
|
|
- statusEl.textContent = isFocus ? '已聚焦' : '未聚焦';
|
|
|
|
|
- widthEl.textContent = isFocus ? 'flex: 1 (最大化)' : '70%';
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function handleFocus() {
|
|
|
|
|
- console.log('输入框获得焦点');
|
|
|
|
|
- const parentContainer = document.getElementById('parentContainer');
|
|
|
|
|
- const inputContainer = document.getElementById('inputContainer');
|
|
|
|
|
- const input = document.getElementById('testInput');
|
|
|
|
|
- const shoppingIcon = document.getElementById('shoppingIcon');
|
|
|
|
|
-
|
|
|
|
|
- parentContainer.classList.add('parent-container-focused');
|
|
|
|
|
- parentContainer.classList.remove('justify-between'); // 移除justify-between类
|
|
|
|
|
- inputContainer.classList.add('input-container-focused');
|
|
|
|
|
- input.classList.add('input-focused');
|
|
|
|
|
- shoppingIcon.style.opacity = '0';
|
|
|
|
|
- shoppingIcon.style.visibility = 'hidden';
|
|
|
|
|
-
|
|
|
|
|
- // 直接设置样式，确保宽度改变
|
|
|
|
|
- inputContainer.style.width = 'calc(100% - 20px)';
|
|
|
|
|
- inputContainer.style.maxWidth = 'calc(100% - 20px)';
|
|
|
|
|
- inputContainer.style.marginRight = '20px';
|
|
|
|
|
- inputContainer.style.flex = '1';
|
|
|
|
|
- inputContainer.style.justifyContent = 'flex-start';
|
|
|
|
|
- inputContainer.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // 调试用红色背景
|
|
|
|
|
-
|
|
|
|
|
- console.log('容器当前宽度:', inputContainer.offsetWidth);
|
|
|
|
|
- console.log('容器当前样式:', window.getComputedStyle(inputContainer).width);
|
|
|
|
|
- console.log('容器justify-content:', window.getComputedStyle(inputContainer).justifyContent);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function handleBlur() {
|
|
|
|
|
- console.log('输入框失去焦点');
|
|
|
|
|
- const parentContainer = document.getElementById('parentContainer');
|
|
|
|
|
- const inputContainer = document.getElementById('inputContainer');
|
|
|
|
|
- const input = document.getElementById('testInput');
|
|
|
|
|
- const shoppingIcon = document.getElementById('shoppingIcon');
|
|
|
|
|
-
|
|
|
|
|
- parentContainer.classList.remove('parent-container-focused');
|
|
|
|
|
- parentContainer.classList.add('justify-between'); // 恢复justify-between类
|
|
|
|
|
- inputContainer.classList.remove('input-container-focused');
|
|
|
|
|
- inputContainer.classList.add('justify-between'); // 恢复justify-between类
|
|
|
|
|
- input.classList.remove('input-focused');
|
|
|
|
|
- shoppingIcon.style.opacity = '1';
|
|
|
|
|
- shoppingIcon.style.visibility = 'visible';
|
|
|
|
|
-
|
|
|
|
|
- // 清除内联样式
|
|
|
|
|
- inputContainer.style.width = '';
|
|
|
|
|
- inputContainer.style.maxWidth = '';
|
|
|
|
|
- inputContainer.style.marginRight = '';
|
|
|
|
|
- inputContainer.style.flex = '';
|
|
|
|
|
- inputContainer.style.justifyContent = '';
|
|
|
|
|
- inputContainer.style.backgroundColor = '';
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- input.addEventListener('focus', function() {
|
|
|
|
|
- isFocus = true;
|
|
|
|
|
- handleFocus();
|
|
|
|
|
- updateStatus();
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- input.addEventListener('blur', function() {
|
|
|
|
|
- isFocus = false;
|
|
|
|
|
- handleBlur();
|
|
|
|
|
- updateStatus();
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- function sendMsg() {
|
|
|
|
|
- alert('发送消息: ' + input.value);
|
|
|
|
|
- input.value = '';
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- updateStatus();
|
|
|
|
|
- </script>
|
|
|
|
|
-</body>
|
|
|
|
|
-</html>
|
|
|
