Кнопка работает в Chrome, но не в Safari. ⇐ CSS

[Anonymous]

Я хочу добавить кнопку поиска, которая, когда я нажимаю на нее, может отображать окно поиска, в котором пользователь может ввести что-то в этом поле поиска, и система обнаружит, есть ли слово, похожее на мое имя местоположения. Функция работает в Chrome, но не в Safari. Пожалуйста, помогите мне решить проблему, спасибо.
Я попробовал добавить console.log в свой searchIcon.addEventListener('click', function(event) , но в Safari это не работает. Несмотря на то, что я нажимаю внизу, никакой информации не отображается.

Код: Выделить всё

// 搜尋店名按鈕

document.addEventListener('DOMContentLoaded', function() {
const searchContainer = document.getElementById('search-container');
const searchIcon = document.getElementById('search-icon');
const searchBox = document.getElementById('search-box');
const searchInput = document.getElementById('search-input');
const searchSubmit = document.getElementById('search-submit');
searchBox.style.display = 'none'; // 确保初始时隐藏

console.log('DOM加载完成，搜索元素:', {
searchContainer: !!searchContainer,
searchIcon: !!searchIcon,
searchBox: !!searchBox,
searchInput: !!searchInput,
searchSubmit: !!searchSubmit
});

if (!searchContainer || !searchIcon || !searchBox || !searchInput || !searchSubmit) {
console.error('无法找到搜索相关的DOM元素');
return;
}

// 修改搜索图标点击事件
searchIcon.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('搜索图标被点击');
searchBox.style.display = searchBox.style.display === 'none' ? 'block' : 'none';
console.log('搜索框显示状态:', searchBox.style.display);
});

// 修改搜索提交按钮点击事件
searchSubmit.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
console.log('搜索提交按钮被点击');
performSearch();
});

searchInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault(); // 阻止默认行为
console.log('在搜索输入框中按下Enter键');
performSearch();
}
});

// 添加点击文档其他地方关闭搜索框的功能
document.addEventListener('click', function(event) {
console.log('点击事件触发，目标元素:', event.target);
if (!searchContainer.contains(event.target)) {
console.log('点击了搜索容器外部，关闭搜索框');
searchBox.style.display = 'none';
}
});

function performSearch() {
console.log('执行搜索');
const searchTerm = searchInput.value.toLowerCase().trim();
console.log('搜索词:', searchTerm);
const foundIndex = markers.findIndex(function(marker) {
return marker.locationName.toLowerCase().includes(searchTerm);
});

if (foundIndex !== -1) {
console.log('找到匹配的位置:', markers[foundIndex].locationName);
openModal(foundIndex);
searchBox.style.display = 'none';
searchInput.value = '';
} else {
console.log('找不到匹配的位置');
alert('找不到符合的店名');
}
}
});

Код: Выделить всё

#search-container {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
color: #171717;
}

#search-icon {
background: none;
border: none;
font-size: 24px;
color: #fff;
/* 白色圖標 */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
/*添加陰影以增加可見度 */
}

#search-box {
position: absolute;
top: 100%;
right: 0;
padding: 10px;
border-radius: 5px;
width: 250px;
/* 調整搜索框寬度 */
}

#search-input {
background-color: #333;
/* 深色背景 */
color: #fff;
/* 白色文字 */
border: 1px solid #555;
}

#search-input::placeholder {
color: #aaa;
/* 淺灰色佔位符文字 */
}

#search-submit {
background-color: #555;
/* 深灰色按鈕背景 */
color: #fff;
/* 白色按鈕文字 */
border: 1px solid #777;
}

#search-submit:hover {
background-color: #666;
/* 懸停時稍微亮一點 */
}

.custom-search .custom-input {
background-color: #333;
color: #fff;
border: 1px solid #555;
}

.custom-search .custom-input::placeholder {
color: #aaa;
}

.custom-search .custom-button {
background-color: #555;
color: #fff;
border: 1px solid #777;
}

.custom-search .custom-button:hover {
background-color: #666;
}

.as-console-wrapper { height:40px;}

Код: Выделить всё

[i][/i]




Search

Подробнее здесь: https://stackoverflow.com/questions/789 ... -in-safari