input type="search" 实现搜索框

e10101 发布于2019-08-01 16:04 / 4106人阅读

摘要：欲实现一个文字搜索的功能，要求输入时，键盘回车按钮提示显示为搜索。于是几经，得到答案设置去掉弹出的下拉框将默认的隐藏掉针对设置样式去除下椭圆形同时别忘记，如果提交搜索时想使用，那么可以阻止表单的默认行为

欲实现一个文字搜索的功能，要求输入时，键盘回车按钮提示显示为“搜索”。效果如下:

开始~

input type=text并不能达到这种效果，google了一下，html5 增加的type=search可以做到（但需要input type=search外面包上一层带action属性的form）。

但type=search会有许多默认样式和行为，这次开发遇到的有：

会默认下拉框显示搜索历史记录;

输入时自动弹出“x”，“x”的样式在不同手机上，样式不同；

IOS 手机（测试时为iphone6 ios10）上输入框为椭圆形.

但我们希望样式按照我们自定义的样式显示，并且各个手机上能统一。

于是几经google，得到答案：

设置input autocomplete="off"去掉弹出的下拉框；

将默认的“x”隐藏掉：

input[type="search"]::-webkit-search-cancel-button{
    display: none;
}

针对ios 设置样式, 去除ios下input 椭圆形:

    -webkit-appearance: none;

同时别忘记，如果提交搜索时想使用ajax，那么可以阻止表单的默认行为：

container.on("submit", ".input-kw-form", function(event){
    event.preventDefault();
})

云服务器 GPU云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50276.html

有关表单autocomplete = &quot;off&quot; 失效问题解决方案

摘要：一介绍是中的新属性。自动完成允许浏览器预测对字段的输入。以及该属性有两个值，和。是规定禁用自动完成功能。二有关失效做项目的时候，有这个固然方便。但是当是的时候，发现并没有起作用。我使用的是这种方法解决的。让文本框消失，密码框显示。一、autocomplete介绍 autocomplete是Html5中的新属性。该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的...

skinner 2019-08-23 10:34 评论0 收藏0
使用Django详细讲解图书管理系统的实现步骤

　　Diango也是由python进行编写的，它的应用范围也是比较的广泛的，可以用来进行编译各种管理系统。那么，怎么使用Django去编写图书管理系统呢？为了解答各位读者的困惑，下面小编就给大家一步一步的列出了详细的步骤。　　项目使用python开发，采用Django框架，数据库采用MySQL，根据用户人员的不同分成两套系统，分别是学生系统和管理员系统，功能模块具体分成四个，分别是用户管理模块、图...

89542767 2022-11-13 15:07 评论0 收藏0
用Vue3管理后台项目实现高德地图的选点

　　现在客户来了一个项目简况：有一个业务场景是添加门店的地址和经纬度，地址可以输入，参考用经纬度当然不行，目前有最好方式就是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。现在我们就看具体的内容。　　登录高德开放平台　　创建应用，添加Key，选择Web端(JS API)，生成Key和安全密钥　　引入地图 JSAPI　　项目中使用了官方推荐的 JSAPILoader 来加载地图　　安装官方 ...

3403771864 2022-10-26 22:57 评论0 收藏0
实现&quot;输入框&quot;获得焦点时外边框变蓝

摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为当输入框获得鼠标焦点时，外...

Coding01 2019-08-21 10:44 评论0 收藏0