vue的ios端适配：input实时搜索

最新推荐文章于 2023-12-05 16:57:52 发布

视界。

最新推荐文章于 2023-12-05 16:57:52 发布

阅读量297

点赞数

分类专栏： vue移动端适配问题文章标签： vue.js

本文链接：https://blog.csdn.net/NBUT_King/article/details/107612191

版权

vue移动端适配问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue的ios端适配：input实时搜索

使用vue开发移动端页面时，通常搜索功能需要实现实时搜索，ios端通常遇到以下问题：

绑定input标签的keyup事件进行实时搜索，使用中文输入法输入英文时，输入完成后通常需要再次点击“前往”或者“换行”，才会进行搜索，在安卓系统上不存在这个问题。

此时，使用watch代替keyup可以解决这个问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

视界。

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Spring Boot+Vue前后端分离商城实战（十四）Vue 商城端项目启动及注意事项

程序员有故事

05-30

1100

前言在正式开发项目前，我们把整个前端的应用架构搭建整齐。我曾经很多次在没有把项目架构搭建完善的情况下，仓促的开始了项目的开发，结果就是遇到一个问题就去完善一个问题，就比如忘记添加路由，又要去把路由文档看一遍，忘记添加 Vuex 全局状态管理、移动端的适配等等，被这些琐碎的事情打断了我开发业务的思路，这是得不偿失的，笔者不希望读者们也重复踩坑，学习的目的就是不踩前人踩过的坑，少走一些弯路。 H5 开发环境搭建初始化项目本项目使用 Vue-CLI 进行项目的初始化，当然有能力的同学可以自己从零开始搭建.

微信分享前端开发全程详解含iOS、安卓、H5、ReactNative以及微信开放标签的适配和使用

最新发布

kovlistudio的博客

09-18

2229

本人在做微信分享前端部分的iOS、安卓和H5的页面和功能时踩了不少坑，于是写了这篇文章，内容包括微信分享在上面三个端接入的技术点和坑点、解决办法，微信开放标签的相关适配，以及ReactNative的特别处理部分。

参与评论您还未登录，请先登录后发表或查看评论

vue 项目移动端适配iOS，安卓

L_C_sunny的博客

03-10

2936

1.首先把安装amfe-flexible，这里使用npm install npm i -S amfe-flexible npm i postcss-pxtorem --save- 2.在入口文件main.js中引入 import ‘lib-flexible’ 3.在config加入 const path = require('path') module.exports = { css: { loaderOptions: { css: {}, p

vue项目input在ios上兼容性问题

平平淡淡

03-30

472

在开发的工程中，发现在苹果手机上搜索框是有兼容性问题的，苹果手机输入法切换成中文输入法输入英文，这个时候input用v-model绑定的数据是获取不到输入的东西的。通过原生js获取document.querySelector('#id').value获取值。

前端-input框输入时，实时执行搜索事件（兼容ios）

weixin_41395648的博客

11-21

1885

var bind_name = 'input';//此处兼容ios，如果直接使用input事件将失效。 $("input").bind(bind_name, function () { $(".search_button").click(); })

input搜索框在ios系统中兼容问题

qq_48648782的博客

11-24

2784

input搜索与ios适配兼容问题场景：h5页面在手机上嵌入时，会有搜索框并且改变键盘“搜索”字体的需求问题1：ios下input中type=“search”，键盘中不变“搜索”的问题 <input type="search" placeholder="搜索生" v-model="searchValue" @keypress.13="goSearch()" /> 解决：在input标签的外面嵌套form

vue ios自带拼音全键输入法模糊查询兼容性问题

weixin_30487701的博客

04-09

210

ios的自带拼音全键会在输入框中输入拼音，直接在输入框用@keyup="autoInput()"的话，在监听输入事件的时候安卓显示正常， ios就会出现输入显示数据不灵敏解决办法：放在watch里监听输入框： html <input type="text" v-model="searchCityModel" placeholder="中文/拼音/首字母" value=""/&...

vue ios输入键盘弹出遮挡样式及收回后页面留白问题解决

weixin_42501961的博客

07-19

2132

最近在进行公众号H5的开发，在android手机上还好说，ios上真的有不少坑啊。下面来说说做评论模块时ios上的坑！ input输入框在ios上，时有时无。问题解决看代码： html: 好了，此事输入框可以乖乖的显示出来了；下面解决键盘收起后有白框的问题，因为这个白框影响input二次输入和点击事件都受到影响。 methods: { onFocus () { let body = do...

vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题

qq_38337245的博客

11-25

1911

坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴；坑二：禁止页面放大缩小，解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小坑三：移动端h5页面禁止长按选择复制，解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移，解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷，山头斜...

rem移动端布局怎么适配IOS和Android

weixin_41809141的博客

07-06

5037

rem移动端布局怎么适配IOS和Android 昨天“佬大”问我做的h5页面在ios上面显示正常，但是Android就变惨不忍睹了，于是我又开始了度量之路，几个小时过去了......“佬大”问好了没。我说：“还没”那你还是问下“俊伟”吧，果然一问牛逼的同事，迎刃而解的快感你感受到了没。做为一个程序员一定要学会问问问。我当时用的是这种方式 <meta name="v...

vue3_input输入框，Ctrl+Enter键换行，Enter键发送信息

qq_45104829的博客

12-05

1092

【代码】input输入框，Ctrl+Enter键换行，Enter键发送信息。

VUE 移动端安卓 ios ，input搜索，软键盘回车触发搜索事件！

MtangEr的博客

01-23

8354

VUE 软键盘回车触发搜索事件代码如下 &lt;div&gt; &lt;img src="../../assets/img/fdj.png" alt=""&gt; &lt;input type="text" v-model="co

Vue项目中使用input,在IOS上点击输入框不聚焦

weixin_45115895的博客

05-18

1177

vue项目有用到输入框,之前一直用安卓机测试,没啥问题,今天偶然用ios测试了一下,发现输入框不能聚焦,且没法输入,百度了一下,还以为是ios版本不支持,添加了自动聚焦属性后并没有作用,继续搜索,有一个情况跟我很符合,说是为了防止在ios上长按(图片或文字)出现选中效果,在全局引入了user-select：none样式,他会影响input，textarea输入框,把该行代码注释掉就好,试了一下,果然是这个原因,就此这个问题解决原文链接如下：https://blog.csdn.net/weixin_4201

在ios中，input唤出软键盘中‘换行’转‘搜索’、‘前往’，及直接唤醒数字键盘的实现（vue）

zuo-yiran的博客

06-07

1万+

&amp;lt;input type=&quot;text&quot; /&amp;gt; 或 &amp;lt;form&amp;gt; &amp;lt;input type=&quot;text&quot; placeholder=&quot;输入&quot;&amp;gt; &am

vue项目ios上input密码框无法输入值

乔的博客

12-09

1208

原因： ios系统的bug，input的type为text后面跟的是password的时候，就不能主动呼出中文输入法。解决：页面上的input输入框设置-webkit-user-select:text !important;或者一并给input的父类加上此样式。（亲试有效）在password前面加一个text的input 并将其宽高设为0 不要用display:none或 visibili...

移动端H5页面，通过点击软键盘搜索按钮实现搜索功能