45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
let inputBox: HTMLInputElement | null = null;
|
|
|
|
export function changeFocusState(target: boolean) {
|
|
if (!inputBox) return;
|
|
if (target) {
|
|
inputBox.focus();
|
|
} else {
|
|
inputBox.blur();
|
|
}
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
const input = event.target as HTMLInputElement;
|
|
const value: string = input.value.trim();
|
|
if (!value) return;
|
|
window.location.href = `/song/${value}/info`;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_autofocus -->
|
|
<div
|
|
class="absolute left-0 md:left-96 ml-4 w-[calc(100%-5rem)] md:w-[calc(100%-40rem)] 2xl:max-w-[50rem] 2xl:left-1/2 2xl:-translate-x-1/2 inline-flex items-center h-full"
|
|
>
|
|
<input
|
|
bind:this={inputBox}
|
|
type="search"
|
|
placeholder="搜索"
|
|
class="top-0 w-full h-10 px-4 rounded-lg bg-white/80 dark:bg-zinc-800/70
|
|
backdrop-blur-lg border border-zinc-300 dark:border-zinc-600 focus:border-zinc-400 duration-200 transition-colors focus:outline-none"
|
|
on:keydown={handleKeydown}
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
[type="search"]::-webkit-search-cancel-button,
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
</style>
|