input type=search 实现搜索框。

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

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

        <div class="search-input-wrap clearfix"><div class="form-input-wrap f-l"><form action="" class="input-kw-form"><input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw"></form><i class="iconfont if-message"></i><i class="iconfont if-close"></i></div><i class="search-cancel f-l">取消</i></div>

但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();
})

注意:container是页面最外层容器,其实就是绑定事件,不绑定在container上也可以的。

如果想用ajax提交请求的话,可以用以下代码实现。

	$("#searchForm").on("submit",function(){getList(); // 查询结果$('#inp_guardianPhone').blur(); // 关掉下方键盘return false; // 取消提交表单})

转载:https://segmentfault.com/a/1190000007765742

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/17638.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatGPT网站报错:Sorry,you have been blocked

打开charGPT网站突然进不去&#xff0c;显示&#xff1a;Sorry,you have been blocked. 尝试清理了chatGPT网站的cookie数据&#xff0c;还是不行。 最后解决方法&#xff1a; 关掉网站&#xff0c;换一个VPN国家&#xff0c;再次打开网站&#xff0c;登录进入成功。

一种解决ChatGPT报错“Sorry, you have been blocked“的方法

ChatGPT突然不能用&#xff0c;尝试了网上说的重启V某N,打开隐私模式等方法都不管用。 采用下面方式&#xff0c;解决&#xff1a; 1.打开浏览器的 “设置”。 2.找到语言设置 3.将首选语言改成英语 搞定&#xff01;

最强绘图AI:一文搞定Midjourney(附送咒语)

最强绘图AI&#xff1a;一文搞定Midjourney&#xff08;附送咒语&#xff09; Midjourney官网&#xff1a;https://www.midjourney.com 简介 Midjourney是目前效果最棒的AI绘图工具。访问Midjourney需要科学姿势。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下…

教培行业的“智能GPT私教”?WorkPlusAI助理帮助教培机构实现十倍人效!

从横空出世到掀起高潮&#xff0c;当下&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;模式下的ChatGPT它正以惊人的速度席卷各个领域&#xff0c;在线教培行业也不例外。那么&#xff0c;正式进入落地期的ChatGPT&#xff0c;在在线教培行业有那些应用前景呢&#…

智能教育卷入GPT混战!三路玩家火拼,“AI老师”成标配

大模型教育场景落地&#xff0c;供给侧军备竞赛已开启。 作者 | 周炎 编辑 | 云鹏 明天&#xff0c;2023世界人工智能大会将正式开幕&#xff0c;据悉&#xff0c;30余款大模型都将悉数亮相&#xff0c;这其中就包括科大讯飞星火认知大模型、网易有道子曰大模型、百度文心一言…

智能教育卷入GPT混战,三路玩家火拼,“AI老师”成标配

大模型教育场景落地&#xff0c;供给侧军备竞赛已开启。 作者 | 周炎 编辑 | 云鹏 明天&#xff0c;2023世界人工智能大会将正式开幕&#xff0c;据悉&#xff0c;30余款大模型都将悉数亮相&#xff0c;这其中就包括科大讯飞星火认知大模型、网易有道子曰大模型、百度文…

最近火出圈的chatGPT智能AI聊天机器人

最近火出圈的chatGPT智能聊天机器人&#xff0c;相信大家都有所了解&#xff0c;那你们是否已经亲身体验过呢&#xff1f;今天&#xff0c;很高兴通知大家&#xff0c;我们最新上线了一个AI智能聊天机器人&#xff0c;让你可以随时随地与它进行自然语言交互。 无论聊天对话、查…

ChatGPT提示大解析:如何有效定制Prompt并用插件管理

有时候&#xff0c;你可能在编程时遇到难题&#xff0c;需要解决方法。有时候&#xff0c;你在学习新的语言时&#xff0c;想要找到一位悉心的教师。又或者&#xff0c;你可能只是需要一些新的灵感&#xff0c;来润色你的文章。在所有这些情况下&#xff0c;ChatGPT都可以发挥巨…

如何用ChatGPT1分钟内撰写完几万字的教学文件?

对于教师和培训工作者来说&#xff0c;进行上课之余&#xff0c;撰写教案也是一项十分耗费时间的任务&#xff0c;但是 Upskillr可以按照你的需要&#xff0c;在一分钟的时间里&#xff0c;为你撰写一份数万字的教学文件&#xff0c;供你下载。 首先登陆您的 ChatGPT帐号&#…

ChatGPT了吗,老师

ChatGPT 火了 让我们来挑战一下 人工智能 能不能取代老师 看我怎么难倒它 请写一份教案 主题是“锐角三角函数” 教学对象是初中生 字数不少于2,000字 哇 当他写出教学目标教学重难点的时候 我真的有这么一丝丝惊讶 因为他真的懂 我的需求是什么 老师们 来看一下ChatGPT写的这…

chatgpt赋能python:Python桌面程序——为您打造高效办公环境

Python桌面程序——为您打造高效办公环境 随着信息化办公的不断发展&#xff0c;桌面应用程序的需求越来越大。Python作为一种高效的编程语言&#xff0c;不仅适用于网络应用开发&#xff0c;也可以应用于桌面程序开发。本文将带您了解Python桌面程序的优势和应用场景。 Pyth…

chatgpt赋能python:Python桌面应用程序开发教程

Python桌面应用程序开发教程 Python是一种高级程序设计语言&#xff0c;具有简单、易读、易学、易用、可扩展和强大的功能&#xff0c;被广泛应用于Web开发、数据分析、机器学习等领域。除了在Web开发和数据处理方面得到广泛的应用之外&#xff0c;Python也能用于桌面应用程序…

chatgpt赋能python:Python如何编写桌面应用程序?

Python如何编写桌面应用程序&#xff1f; 随着Python的日益普及和发展&#xff0c;它在不同领域中得到了广泛应用。其中之一就是编写桌面应用程序。Python语言拥有丰富的GUI&#xff08;图形用户界面&#xff09;库&#xff0c;可以帮助开发者轻松地创建漂亮、跨平台的桌面应用…

windows 服务程序和桌面程序集成(一)

本系列文章介绍如何将windows服务程序和桌面程序集成在一起&#xff0c;也就是说一个EXE程序&#xff0c;既可以作为服务程序运行&#xff0c;也可以作为桌面程序运行的双模程序。 在十几年前&#xff0c;曾经给客户开发一套C/S架构的出单程序&#xff0c;当时不是很清楚window…

整合ChatGPT:微软与谷歌的搜索大战

本文总共探讨了以下几个问题&#xff1a;OpenAI和微软什么关系&#xff1f;整合ChatGPT的微软搜索引擎Bing面临什么潜在问题&#xff1f;对这件事&#xff0c;谷歌怎么考虑&#xff1f;整合的产品能长什么样&#xff1f;微软需要解决的问题&#xff0c;和面临的机遇在哪&#x…

小冰李笛:ChatGPT在向“让你认为它有知识”的方向发展 | MEET 2023

衡宇 整理自 MEET2023量子位 | 公众号 QbitAI ChatGPT技惊四座&#xff0c;甚至不少人认为它已经能“取代搜索引擎”。 然而就在MEET2023智能未来大会上&#xff0c;却出现了这样一种迥然相异的观点&#xff1a; 未来5年里&#xff0c;大家想要获取知识&#xff0c;最好的方法还…

苹果CMS仿T5资源站影视资源分享网站模板

简介&#xff1a; 苹果cms仿T5资源站影视资源分享网站模板&#xff0c;包括首页、详情页、留言页、和播放弹窗&#xff01;适合拿去做资源站&#xff01; 云盘地址&#xff1a; http://zijieyunpan.cn/eF3crCQyWVO 演示&#xff1a;

美团实践:交互式推荐在外卖场景的探索与应用

省时查报告-专业、及时、全面的行研报告库 省时查方案-专业、及时、全面的营销策划方案库 【免费下载】2023年1月份热门报告合集 ChatGPT的发展历程、原理、技术架构及未来方向 《ChatGPT&#xff1a;真格基金分享.pdf》 2023年AIGC发展趋势报告&#xff1a;人工智能的下一时代…

交互式推荐在外卖场景的探索与应用

省时查报告-专业、及时、全面的行研报告库 省时查方案-专业、及时、全面的营销策划方案库 【免费下载】2023年1月份热门报告合集 ChatGPT的发展历程、原理、技术架构及未来方向 《ChatGPT&#xff1a;真格基金分享.pdf》 2023年AIGC发展趋势报告&#xff1a;人工智能的下一时代…

【实践】美团外卖首页Feed在搭建交互式推荐时遇到的挑战和解决思路

【免费下载】2023年2月份热门报告合集 知识图谱在美团推荐场景中的应用实践 国内最新亲测可用ChatGPT使用申请教程 ChatGPT团队背景研究报告 ChatGPT的发展历程、原理、技术架构及未来方向 ChatGPT使用总结&#xff1a;150个ChatGPT提示此模板 ChatGPT数据集之谜 《ChatGPT&…