FastAdmin 开发学习给输入框加上清除功能

在社区上有小伙伴询问如果给输入框加上清除功能，因为有时修重新搜索时需要将输入框的内容快速清除，所以这个功能对用户非常友好。
如上图所示这种。

我看了一下之前有见过，这个找了一下资料发现现代的浏览器都支持这个功能。
只需要将 input 为 type= "search" 即可。
效果如下：

在 Google Chrome 中的显示效果

在 IE 11 中的显示效果

在 Edge 中的显示效果

FastAdmin 开发学习给输入框加上清除功能的更多相关文章

  1. 为Jquery EasyUI 组件加上“清除”功能

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或 ...

  2. 为JQuery EasyUI 表单组件加上“清除”功能

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或 ...

  3. （转载） Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

    Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框 标签: Android清除功能EditText仿IOS的输入框 2013-09-04 17:33 70865人阅读  ...

  4. 【转载】salesforce 零基础开发入门学习（一）Salesforce功能介绍，IDE配置以及资源下载

    salesforce 零基础开发入门学习(一)Salesforce功能介绍,IDE配置以及资源下载   目前国内已经有很多公司做salesforce,但是国内相关的资料确是少之又少.上个月末跳槽去了新 ...

  5. Python实现使用tkinter弹出输入框输入数字, 具有确定输入和清除功能

    Python3.6中用tkinter, 弹出可以输入数字的输入框. # Copyright (c) 2017-7-21 ZhengPeng All rights reserved. def pop_u ...

  6. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  7. Android开发学习路线图

    Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...

  8. Android开发学习总结(一)——搭建最新版本的Android开发环境

    Android开发学习总结(一)——搭建最新版本的Android开发环境(转) 最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是 ...

  9. 步步为营 SharePoint 开发学习笔记系列总结

    转:http://www.cnblogs.com/springyangwc/archive/2011/08/03/2126763.html 概要 为时20多天的sharepoint开发学习笔记系列终于 ...

随机推荐

  1. js如何调试,使用debug模式

    js的代码断点调试非常简单,不需要借助代码编辑器,只要浏览器就行了(注意:html代码打断点是没有用的,只有js的才行,下图第二步打开开发者模式使用F12才对):

  2. DevExpress WinForms使用教程：新的CheckEdit样式

    [DevExpress WinForms v18.2下载] 在最开始CheckEdit控件有16种样式, 使用CheckStyle属性,开发人员可以选择其中一种样式.随着时间推移,与其他Windows ...

  3. ThreadPoolExcutor

    先保存一个链接,后续更新 JAVA进阶----ThreadPoolExecutor机制 ExecutorService生命周期 理解ThreadPoolExecutor源码(一)线程池的corePoo ...

  4. centos7安装maven,git

    1.maven 下载 2.安装包 解压 3.配置maven环境变量 4.检查是否安装成功 5.检查是否安装 git 6.yum 安装 git 7.配置 git 环境变量 8.检查git是否安装成功 1 ...

  5. kubernetes 环境搭建(ubuntu16.04)

    通过kubeadm安装kubernetes的教程:1: 首先在每台机器上安装: docker(1.12), kubeadm(1.6), kubectl, kubelet, kubernetes-cni ...

  6. django面试题必知

    Django的Model的继承有几种形式,分别是什么?(私信小编001 .002 .003 .007任何一个即可获取Python学习资料) 一.抽象继承: 这种继承的定义方法如下: 上例中,我们的Hu ...

  7. python day09作业答案

    2. def lst(input): lst2=[] count=0 for i in range(0,len(input)): if i %2!=0: lst2.append(input[i]) r ...

  8. 如何使用Android Studio把自己的Android library分享到jCenter和Maven Central

    参考链接: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0623/3097.html

  9. 推荐系统-07-lambda架构

    Lambda 架构 Lambda 架构由Storm的作者Nathan Marz提出,其设计目的在于提供一个能满足大数据系统关键特性的架构,包括高容错.低延迟.可扩展等.其整合离线计算与实时计算,融合不 ...

  10. Kaggle：House Prices: Advanced Regression Techniques 数据预处理

    本博客是博主在学习了两篇关于 "House Prices: Advanced Regression Techniques" 的教程 (House Prices EDA 和 Comp ...