推广 热搜: 行业  机械  设备    经纪  教师  系统  参数    蒸汽 

学习总结——h5搜索框input回车自动搜索,及IOS X及以上h5 input页面切换后显示内容丢失fix

   日期:2024-11-10     移动:http://yejunbin01.xhstdz.com/mobile/quote/3094.html

如题,最近做移动端h5的一个搜索功能,使用了input标签,常规的功能(输入搜索词、键盘回车键/search键按下触发搜索)类似这样

学习总结——h5搜索框input回车自动搜索,及IOS X及以上h5 input页面切换后显示内容丢失fix

构建h5搜索框input回车自动搜索搜索框代码如下,type=search后键盘上会出现搜索/search键,按下需要包裹form表单承接事件,keyup.13是键盘回车/搜索键按下后光标失焦设置。

 

由于search类型的input自带了搜索标识和清除标识,如果有自定义样式需要的可以添加如下样式代码,然后自定义搜索框样式

 

测试时候发现灵异现象(iphone xr及以上机型,如果已经键入了搜索词,然后页面上有其他内容跳转了不是同域名下的其他页面,页面返回原搜索页后,输入的query搜索词在搜索框input中不显示(iphone xr以上机型稳定复现,ಥ_ಥ

为了排查这个问题,在页面上打印了绑定的query值,并且查看了返回后的页面路由,query词都是有值的~所以只能从代码本身找原因

科学探究就是要乐此不疲,解决探究如下

1、判断是不是ios本身input的问题——新建一个最简单的input,赋值,页面跳转返回后未丢失,input本身无问题

2、判断是否是样式层级的问题——查看只显示了placeholder,设置的按钮等绝对定位的大小合适,无遮挡,去除样式class后扔稳定复现,非样式层级问题

3、那就是search input自己的问题了,本着变量单一探究法,我对红框中的属性逐个删除,这回发现了问题所在,mdn对于此属性的描述(<input>:输入(表单输入)元素 - HTML(超文本标记语言) | MDN)不过加了off后在某些情况下仍会失效,解决办法,移除了autocomplete="off"属性或者修改为autocomplete="no"(on/off之外的其他值,此外不同的使用场景,官网文档中还有许多特定场景的值设置,可以根据自己的需要进行设置)此问题不再复现,问题解决

 修改后代码如下

本文地址:http://yejunbin01.xhstdz.com/quote/3094.html    物流园资讯网 http://yejunbin01.xhstdz.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号