From 4e591b385c5752c984685a4ee9cf96043a1c3039 Mon Sep 17 00:00:00 2001
From: Conrad Zelck <git@simpel.cc>
Date: Mon, 4 Oct 2021 11:50:42 +0200
Subject: [PATCH] feat: convert input to type search
This type of input has an [x] on the right side to clear input
instantly. Key ESC binds to this automatically. Had to add onsearch to
this input too.
Signed-off-by: Conrad Zelck <git@simpel.cc>
---
index.php | 2 +-
style.css | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/index.php b/index.php
index d23eaa0..ef563c1 100644
--- a/index.php
+++ b/index.php
@@ -25,7 +25,7 @@
<main>
<div>
<label for="searchinput">Search language or comment syntax:</label>
- <input type="text" id="searchinput" onkeyup="searchSyntax()" title="Type in a scripting language or comments syntax" placeholder="search string …" autofocus>
+ <input type="search" id="searchinput" onkeyup="searchSyntax()" onsearch="searchSyntax()" title="Type in a scripting language or comments syntax" placeholder="search string …" autofocus>
<table id="resulttable">
<thead>
<tr>
diff --git a/style.css b/style.css
index 7ab7b86..8dea66d 100644
--- a/style.css
+++ b/style.css
@@ -97,7 +97,7 @@ input {
box-sizing: border-box;
}
-input[type="text"] {
+input[type="search"] {
width: 70ch;
max-width: calc(100vw - 8vmin);
}
--
GitLab