Fix 搜索框无法点击 #2

This commit is contained in:
底层用户 2022-08-19 11:55:02 +08:00
parent 75c6e6b3d9
commit 6f48c6ed2d
4 changed files with 133 additions and 137 deletions

View File

@ -134,6 +134,46 @@ img.error {
transition: 0.3s; transition: 0.3s;
} }
/*
搜索框点击后更改样式
*/
/*搜索框*/
.onsearch .all-search {
background-color: var(--main-text-form-hover-color);
transform: translateY(-140%);
transition: ease 0.3s !important;
}
/*背景模糊*/
.onsearch #bg {
transform: scale(1.08) !important;
filter: blur(10px) !important;
transition: ease 0.3s !important;
}
/*搜索引擎按钮*/
.onsearch #icon-se {
color: var(--main-text-form-color) !important;
transition: ease 0.5s;
}
/*搜索按钮*/
.onsearch #icon-sou {
color: var(--main-text-form-color) !important;
transition: ease 0.5s;
}
/*时间上移*/
.onsearch .tool-all {
transform: translateY(-140%) !important;
}
/*搜索引擎选择上移*/
.onsearch .search-engine {
transform: translateY(-38%) !important;
}
/*时间*/ /*时间*/
.tool-all { .tool-all {
@ -372,7 +412,7 @@ img.error {
#keywords { #keywords {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 46%; top: 46.5%;
font-size: small; font-size: small;
color: var(--main-text-color); color: var(--main-text-color);
background-color: var(--main-background-color); background-color: var(--main-background-color);
@ -405,7 +445,8 @@ img.error {
font-size: small; font-size: small;
} }
.keyword:hover { .keyword:hover,
.keyword.choose {
cursor: pointer; cursor: pointer;
/* font-weight: bold; */ /* font-weight: bold; */
transition: 0.3s; transition: 0.3s;

1
css/style.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -130,12 +130,21 @@ $(function () {
}) })
}) })
//输入框为空时阻止跳转
$(window).keydown(function (e) {
var key = window.event ? e.keyCode : e.which;
if (key.toString() == "13") {
if ($(".wd").val() == "") {
return false;
}
}
});
//点击搜索按钮 //点击搜索按钮
$(".sou-button").click(function () { $(".sou-button").click(function () {
iziToast.show({ if ($("body").attr("class") === "onsearch") {
message: '问题未修复,请点击键盘上的确认键以搜索', $("#search-submit").click();
}); }
// $('#search-submit').click();
}); });
//控制台输出 //控制台输出

195
js/set.js
View File

@ -250,74 +250,16 @@ function setBgImgInit() {
// 搜索框高亮 // 搜索框高亮
function focusWd() { function focusWd() {
//输入框 $("body").addClass("onsearch");
$(".all-search").css({
"background-color": 'var(--main-text-form-hover-color)',
"transition": "ease 0.4s",
"transform": "translateY(-140%)"
});
//背景模糊
$('#bg').css({
"transform": "scale(1.08)",
"filter": "blur(10px)",
"transition": "ease 0.3s",
});
//搜索引擎按钮
$('#icon-se').css({
"color": 'var(--main-text-form-color)',
"transition": "ease 0.5s"
});
//搜索按钮
$('#icon-sou').css({
"color": "var(--main-text-form-color)",
"transition": "ease 0.5s"
});
//时间上移
$(".tool-all").css({
"transform": "translateY(-140%)"
});
//搜索引擎选择上移
$(".search-engine").css({
"transform": "translateY(-30%)"
});
} }
// 搜索框取消高亮 // 搜索框取消高亮
function blurWd() { function blurWd() {
//输入框 $("body").removeClass("onsearch");
$(".all-search").css({
"background-color": "",
"transition": "ease 0.4s",
"transform": ""
});
//背景模糊
$('#bg').css({
"transform": "scale(1)",
"filter": "blur(0px)",
"transition": "ease 0.3s",
});
//搜索引擎按钮
$('#icon-se').css({
"color": "var(--main-text-color)",
"transition": "ease 0.5s"
});
//搜索按钮
$('#icon-sou').css({
"color": 'var(--main-text-color)',
"transition": "ease 0.5s"
});
//隐藏输入 //隐藏输入
$(".wd").val(""); $(".wd").val("");
//时间下移
$(".tool-all").css({
"transform": "translateY(-120%)"
});
//隐藏搜索建议 //隐藏搜索建议
$("#keywords").hide(); $("#keywords").hide();
//搜索引擎选择恢复
$(".search-engine").css({
"transform": "translateY(0)"
});
} }
// 搜索建议提示 // 搜索建议提示
@ -333,9 +275,13 @@ function keywordReminder() {
$("#keywords").css("width", $('.sou').width()); $("#keywords").css("width", $('.sou').width());
$("#keywords").empty().show(); $("#keywords").empty().show();
$.each(data.s, function (i, val) { $.each(data.s, function (i, val) {
$('#keywords').append("<div class=\"keyword\" data-id=\"" + (i + 1) + "\">" + "<i class='iconfont icon-sousuo'></i>" + val + "</div>"); $('#keywords').append(`<div class="keyword" data-id="${i + 1}"><i class='iconfont icon-sousuo'></i>${val}</div>`);
}); });
$("#keywords").attr("data-length", data.s["length"]); $("#keywords").attr("data-length", data.s["length"]);
$(".keyword").click(function () {
$(".wd").val($(this).text());
$("#search-submit").click();
});
}, },
error: function () { error: function () {
$("#keywords").empty().show(); $("#keywords").empty().show();
@ -374,7 +320,8 @@ function seList() {
var html = ""; var html = "";
var se_list = getSeList(); var se_list = getSeList();
for (var i in se_list) { for (var i in se_list) {
html += "<div class='se-li' data-url='" + se_list[i]["url"] + "' data-name='" + se_list[i]["name"] + "' data-icon='" + se_list[i]["icon"] + "'><a class='se-li-text'><i id='icon-sou-list' class=' " + se_list[i]["icon"] + " '></i><span>" + se_list[i]["title"] + "</span></a></div>"; html += `<div class='se-li' data-url='${se_list[i]["url"]}' data-name='${se_list[i]["name"]}' data-icon='${se_list[i]["icon"]}'>
<a class='se-li-text'><i id='icon-sou-list' class='${se_list[i]["icon"]}'></i><span>${se_list[i]["title"]}</span></a></div>`;
} }
$(".search-engine-list").html(html); $(".search-engine-list").html(html);
} }
@ -385,20 +332,20 @@ function setSeInit() {
var se_list = getSeList(); var se_list = getSeList();
var html = ""; var html = "";
for (var i in se_list) { for (var i in se_list) {
var tr = "<div class='se_list_div'><div class='se_list_num'>" + i + "</div>"; var tr = `<div class='se_list_div'><div class='se_list_num'>${i}</div>`;
if (i === se_default) { if (i === se_default) {
tr = "<div class='se_list_div'><div class='se_list_num'>\ tr = `<div class='se_list_div'><div class='se_list_num'>
<i class='iconfont icon-home'></i></div>"; <i class='iconfont icon-home'></i></div>`;
} }
tr += "<div class='se_list_name'>" + se_list[i]["title"] + "</div>\ tr += `<div class='se_list_name'>${se_list[i]["title"]}</div>
<div class='se_list_button'>\ <div class='se_list_button'>
<button class='set_se_default' value='" + i + "' style='border-radius: 8px 0px 0px 8px;'>\ <button class='set_se_default' value='${i}' style='border-radius: 8px 0px 0px 8px;'>
<i class='iconfont icon-home'></i></button>\ <i class='iconfont icon-home'></i></button>
<button class='edit_se' value='" + i + "'>\ <button class='edit_se' value='${i}'>
<i class='iconfont icon-xiugai'></i></button>\ <i class='iconfont icon-xiugai'></i></button>
<button class='delete_se' value='" + i + "' style='border-radius: 0px 8px 8px 0px;'>\ <button class='delete_se' value='${i}' style='border-radius: 0px 8px 8px 0px;'>
<i class='iconfont icon-delete'></i></button></div>\ <i class='iconfont icon-delete'></i></button></div>
</div>"; </div>`;
html += tr; html += tr;
} }
$(".se_list_table").html(html); $(".se_list_table").html(html);
@ -431,14 +378,11 @@ function quickData() {
var html = ""; var html = "";
var quick_list = getQuickList(); var quick_list = getQuickList();
for (var i in quick_list) { for (var i in quick_list) {
html += "<div class='quick'>\ html += `<div class="quick">
<a href='" + quick_list[i]['url'] + "' target='_blank'>\ <a href="${quick_list[i]['url']}" target="_blank">${quick_list[i]['title']}</a>
" + quick_list[i]['title'] + "\ </div>`;
</a>\
</div>";
} }
$(".quick-all").html(html + "<div class='quick'><a id='set-quick'>\ $(".quick-all").html(html + `<div class="quick"><a id="set-quick"><i class="iconfont icon-tianjia-"></i></a></div>`);
<i class='iconfont icon-tianjia-'></i></a></div>");
} }
// 设置-快捷方式加载 // 设置-快捷方式加载
@ -446,24 +390,24 @@ function setQuickInit() {
var quick_list = getQuickList(); var quick_list = getQuickList();
var html = ""; var html = "";
for (var i in quick_list) { for (var i in quick_list) {
tr = "<div class='quick_list_div'>\ tr = `
<div class='quick_list_div_num'>" + i + "</div>\ <div class='quick_list_div'>
<div class='quick_list_div_name'>" + quick_list[i]['title'] + "</div>\ <div class='quick_list_div_num'>${i}</div>
<div class='quick_list_div_button'>\ <div class='quick_list_div_name'>${quick_list[i]['title']}</div>
<button class='edit_quick' value='" + i + "' style='border-radius: 8px 0px 0px 8px;'>\ <div class='quick_list_div_button'>
<i class='iconfont icon-xiugai'></i></button>\ <button class='edit_quick' value='${i}' style='border-radius: 8px 0px 0px 8px;'>
<button class='delete_quick' value='" + i + "' style='border-radius: 0px 8px 8px 0px;'>\ <i class='iconfont icon-xiugai'></i></button>
<i class='iconfont icon-delete'></i></button>\ <button class='delete_quick' value='${i}' style='border-radius: 0px 8px 8px 0px;'>
</div>\ <i class='iconfont icon-delete'></i></button>
</div>\ </div>
</div>"; </div>`;
html += tr; html += tr;
} }
$(".quick_list_table").html(html); $(".quick_list_table").html(html);
} }
/** /**
* 文本为文件 * 文本为文件
* @param filename 文件名 * @param filename 文件名
* @param text 内容 * @param text 内容
*/ */
@ -619,6 +563,7 @@ $(document).ready(function () {
if ($("#content").attr("class") === "box") { if ($("#content").attr("class") === "box") {
closeBox(); closeBox();
closeSet(); closeSet();
blurWd();
} else { } else {
openBox(); openBox();
} }
@ -647,34 +592,34 @@ $(document).ready(function () {
}); });
// 搜索框点击事件 // 搜索框点击事件
$(document).on('click', '.sou', function(event) { $(document).on('click', '.sou', function () {
focusWd(); focusWd();
$(".search-engine").slideUp(160); $(".search-engine").slideUp(160);
}) });
$(document).on('click', '.wd', function(event) { $(document).on('click', '.wd', function () {
focusWd(); focusWd();
keywordReminder(); keywordReminder();
$(".search-engine").slideUp(160); $(".search-engine").slideUp(160);
}) });
// 点击其他区域关闭事件 // 点击其他区域关闭事件
$(document).on('click', '.close_sou', function() { $(document).on('click', '.close_sou', function () {
blurWd(); blurWd();
closeSet(); closeSet();
}) });
// 点击搜索引擎时隐藏自动提示 // 点击搜索引擎时隐藏自动提示
$(document).on('click', '.se', function() { $(document).on('click', '.se', function () {
$('#keywords').toggle(); $('#keywords').toggle();
}) });
// 恢复自动提示 // 恢复自动提示
$(document).on('click', '.se-li', function() { $(document).on('click', '.se-li', function () {
$('#keywords').show(); $('#keywords').show();
}) });
// 自动提示( 调用百度 api // 自动提示 (调用百度 api
$('.wd').keyup(function (event) { $('.wd').keyup(function (event) {
var key = event.keyCode; var key = event.keyCode;
// 屏蔽上下键 // 屏蔽上下键
@ -694,32 +639,32 @@ $(document).ready(function () {
}); });
// 自动提示键盘方向键选择操作 // 自动提示键盘方向键选择操作
// $(".wd").keydown(function (event) { //上下键获取焦点 $(".wd").keydown(function (event) { //上下键获取焦点
// var key = event.keyCode; var key = event.keyCode;
// if ($.trim($(this).val()).length === 0) return; if ($.trim($(this).val()).length === 0) return;
// var id = $(".keyword-active").attr("data-id"); var id = $(".choose").attr("data-id");
// if (id === undefined) id = 0; if (id === undefined) id = 0;
// if (key === 38) { if (key === 38) {
// /*向上按钮*/ /*向上按钮*/
// id--; id--;
// } else if (key === 40) { } else if (key === 40) {
// /*向下按钮*/ /*向下按钮*/
// id++; id++;
// } else { } else {
// return; return;
// } }
// var length = $("#keywords").attr("data-length"); var length = $("#keywords").attr("data-length");
// if (id > length) id = 1; if (id > length) id = 1;
// if (id < 1) id = length; if (id < 1) id = length;
// $(".keyword[data-id=" + id + "]").addClass("keyword-active").siblings().removeClass("keyword-active"); $(".keyword[data-id=" + id + "]").addClass("choose").siblings().removeClass("choose");
// $(".wd").val($(".keyword[data-id=" + id + "]").text()); $(".wd").val($(".keyword[data-id=" + id + "]").text());
// }); });
// 菜单点击 // 菜单点击
$("#menu").click(function (event) { $("#menu").click(function () {
if ($(this).attr("class") === "on") { if ($(this).attr("class") === "on") {
closeSet(); closeSet();
} else { } else {