feat: 支持在搜索框内显示清空按钮

Author: Light

src/css/nav.css

@@ -48,6 +48,9 @@
   border: 1px solid #e6e6e6;
   border-radius: 10px;
 }
+.search-input.can-clean {
+  padding: 0 70px 0 45px;
+}
 .search-input:focus {
   outline: none;
   border: 1px solid #2188ff;
@@ -59,6 +62,18 @@ input::-webkit-input-placeholder {
   letter-spacing: 1px;
   color: #ccc;
 }
+.search-clean {
+  position: absolute;
+  right: 45px;
+  top: 25%;
+  background: transparent;
+  border: none;
+  color: #ddd;
+  font-size: 18px;
+}
+.search-clean:hover {
+  color: #8e262a;
+}
 .search-btn {
   position: absolute;
   right: 0;

src/footer.php

@@ -178,6 +178,22 @@ function darkHandler(darkMode, mode, write = false) {
         })
     })();
 </script>
+<?php if($this->options->isSearchClean == '1'): ?>
+  <script type="text/javascript">
+      (function () {
+          const searchCleanBtn = document.getElementById('search-clean');
+          searchCleanBtn && searchCleanBtn.addEventListener('click', e => {
+              e.stopPropagation();
+              const txtInput = document.getElementById('txt');
+              if (txtInput) {
+                  txtInput.value = '';
+                  txtInput.focus();
+              }
+          })
+      })();
+  </script>
+<?php endif; ?>
+
 
 <style>
     <?php if ($this->options->isSearchTop == '1') : ?>

src/functions.php

@@ -260,6 +260,9 @@ function themeConfig($form)
     $form->addInput($isSearch);
     $isSearchTop = new Typecho_Widget_Helper_Form_Element_Radio('isSearchTop', array('0' => _t('禁用'), '1' => _t('启用')), '0', _t('搜索框置顶'), _t('始终将搜索框置顶，即不受页面滚动影响'));
     $form->addInput($isSearchTop);
+    // 搜索框内的清空按钮
+    $isSearchClean = new Typecho_Widget_Helper_Form_Element_Radio('isSearchClean', array('0' => _t('禁用'), '1' => _t('启用')), '0', _t('搜索框内容清空按钮'), _t('在搜索框内一个显示清空内容的按钮'));
+    $form->addInput($isSearchClean);
     // 右侧浮动窗
     $fk_zmki = new Typecho_Widget_Helper_Form_Element_Radio('fk_zmki', array('0' => _t('禁用'), '1' => _t('启用')), '1', _t('右侧浮动窗'), _t("是否显示右侧浮动窗，包含返回顶部按钮以及手机端的侧栏切换"));
     $form->addInput($fk_zmki);

src/search.php

@@ -1,8 +1,12 @@
 <section class="sousuo">
   <div class="search">
     <div class="search-box">
-      <span class="search-icon" style="background: url(<?php echo THEME_URL ?>/fonts/baidu.svg) 0px 0px; opacity: 1;"></span>
-      <input type="text" id="txt" class="search-input"  autocomplete="off"  placeholder="输入关键字，按下回车搜索">
+            <span class="search-icon"
+                  style="background: url(<?php echo THEME_URL ?>/fonts/baidu.svg) 0px 0px; opacity: 1;"></span>
+      <input type="text" id="txt" class="search-input <?php echo $this->options->isSearchClean == '1' ? 'can-clean' : ''; ?>" autocomplete="off" placeholder="输入关键字，按下回车搜索">
+      <?php if($this->options->isSearchClean == '1'): ?>
+        <button class="search-clean" id="search-clean" title="清空内容"><i class="fa fa-close"></i></button>
+      <?php endif; ?>
       <button class="search-btn" id="search-btn"><i class="fa fa-search"></i></button>
     </div>
     <!-- 搜索索引 -->
@@ -15,8 +19,8 @@
         <strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
         <div class="search-engine-tool">检索已有网址： <span id="hot-btn"></span></div>
       </div>
-      <ul class="search-engine-list search-engine-list_zmki_ul"> 
+      <ul class="search-engine-list search-engine-list_zmki_ul">
       </ul>
     </div>
-   </div>
-</section>
+  </div>
+</section>