【uniapp】uniapp input 焦点聚焦失败【已解决】

这篇具有很好参考价值的文章主要介绍了【uniapp】uniapp input 焦点聚焦失败【已解决】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

苹果11真机调试uniapp(vue3)小程序中的input,聚焦失败。
安卓机没有这问题~

解决方案:

提示:给input输入框一个聚焦和失去焦点的事件

示例代码:

template代码

<u-form :rules="formRules" :model="formModel" ref="formRef">
          <u-form-item label="测试" prop="test" label-position="top">
            <u-input type="text" placeholder="请输入姓名" @click="handleFormClick('test')" @blur="focusName.test=false" :focus="focusName.test" v-model="formModel.test" />
          </u-form-item>
        </u-form>

javascript代码

...
let focusName = reactive({
	test,
})
const handleFormClick = (type:string)=>{
	focusName[type] = true;
}
...

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教文章来源地址https://www.toymoban.com/news/detail-411119.html

到了这里,关于【uniapp】uniapp input 焦点聚焦失败【已解决】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 编写一个指令(v-focus2end)使输入框文本在聚焦时焦点在文本最后一个位置

    项目反馈输入框内容比较多时候,让鼠标光标在最后一个位置,心想什么奇葩需求,后面试了一下,是有点影响体验,于是就有了下面的效果,我目前的项目都是若依的架子,用的是vue2版本。vue3的朋友想要使用,自行调节 效果图如下: 使用方法: 前提是指令被注册,代码

    2024年02月13日
    浏览(28)
  • 微信小程序input异常聚焦

    如上图所示,在小程序弹窗内第一行有Input和2个按钮。 异常是在真机上点击取消按钮隐藏弹窗时,input会异常聚焦,页面显示异常,会显示为Input框内值,并自动拉起小键盘。在真机点击小键盘任意键或者隐藏小键盘可消除残影。  尝试当惦记取消按钮时,设置input的focus为

    2024年02月07日
    浏览(42)
  • Vue实现多个input输入,光标自动聚焦到下一个input

    遇到一个需求,需要实现和移动端短信输入一样,输入内容后,光标会进入下一个输入框 需要用到2个事件  keydown事件发生在键盘的键被按下的时候 keyup  事件在按键被释放的时候触发

    2024年02月20日
    浏览(28)
  • el-input-number 失去焦点blur事件,

            最近遇到了个奇怪的需求,需要代码手动给数字输入框手动触发失焦事件;但是在看了 el-input-number 焦点事件部分的源码后,发现 el-input-number 只有获取焦点focus事件,却没有失去焦点的事件: 后来再阅读了 el-input-number的 template部分的源码后;发现el-input-number封装

    2024年02月13日
    浏览(30)
  • 记ios的input框获取焦点之后界面放大问题

    在移动端开发项目中,发现页面在使用 iPhone 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大,而且失去焦点之后页面不能返回原来的样子。检查了下功能上没有什么大问题,但是页面会整体放大,而且失去焦点之后页面不能返回原来的样子。对

    2024年02月12日
    浏览(34)
  • element-ui表单input输入框获取自动聚焦功能

    1.问题描述 当用户点击新增按钮时,弹出新增页面,需要form表单中的input框自动获取焦点 2.解决的方法 第一步:给form表单的input输入框添加ref属性 第二步:定义一个方法 我是使用vue开发前端页面的,所以在methods中定义一个方法,在方法中写input输入框自动聚焦的功能 第三步

    2024年02月14日
    浏览(34)
  • Android WebView 获取html页面聚焦input在页面的位置

    Android WebView 获取html页面聚焦input在页面的位置,实现代码如下: 注意: WebView 要设置setJavaScriptEnabled支持JavaScript调用 返回的数值是以dp为单位,使用时需要转换为像素px

    2024年02月15日
    浏览(41)
  • css伪类元素使用技巧 表达input父级聚焦css实现

    在这里插入图片描述

    2024年02月08日
    浏览(38)
  • uniapp input 被键盘遮挡的解决方案

    在uniapp登录页遇到了input被键盘遮挡的和一点击输入框(或两个输入框来回切换输入)页面就闪现刷新的问题。解决如下: 闪现/刷新:用uniapp自身的 input 标签,替换uview的 u-input ,用 @input 事件替换掉 v-model 属性 遮挡:增加三个标签属性 :always-embed=“true”:adjust-position=“tr

    2024年02月11日
    浏览(34)
  • 移动端H5页面在input输入框获得焦点时禁止唤起键盘

    移动端 实现效果: 当input输入框获得焦点时,在保留光标的情况下,又不让手机虚拟键盘弹起 问题背景: 哈哈哈哈 我又来了,又是java安卓应用嵌入H5页面,给大家看下效果 点击开始时间或者结束时间时会弹出日期选择器,这个时候呢在手机上看的话,会同时触发键盘,导

    2024年02月16日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包