微信小程序-input聚焦问题

最新推荐文章于 2024-05-17 08:31:50 发布
最新推荐文章于 2024-05-17 08:31:50 发布
阅读量5.6k 收藏 1
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/82909141
版权

问题描述：在微信开发者工具中，有时候点击input输入框无法聚焦，光标闪一下就没了

解决办法：在input框长按鼠标 或者点击input输入框上面一点

参考别人大概问题是电脑显示的缩放与布局造成的，不影响实际使用。

window10的解决方法：

  1. 桌面右击，选择显示设置
  2. 选择缩放与布局，改为100%
chibimarukochan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和开发流程。 1. **组件基础**：微信小程序的组件类似于HTML中的标签，但提供了更为丰富的功能和交互性。常见的组件包括视图容器...
微信小程序默认获取聚焦事件
祈澈菇凉
01-15 4109
在input里面设置focus <input type="text" focus="{{inputShowed}}" /> 左边的是input没有获取焦点事件，也没有键盘弹出。 // 搜索框状态 inputShowed: false, 右边的是input获取焦点事件，默认有键盘弹出。 // 搜索框状态 ...
微信小程序input异常聚焦
jpjp2020的博客
04-21 2102
异常是在真机上点击取消按钮隐藏弹窗时，input会异常聚焦，页面显示异常，会显示为Input框内值，并自动拉起小键盘。尝试把取消按钮事件绑定在购买文本上，真机无异常，怀疑是离Input太近了影响的。设置了input和取消按钮的相对定位，并且取消按钮层级更高。尝试当惦记取消按钮时，设置input的focus为false，并监听input的聚焦和失焦事件，真机异常仍然存在。最后把文本按钮的标签改成了，异常消失，问题解决。
微信小程序使用input标签遇到的问题
qq_41687299的博客
05-17 531
场景2：input标签在scroll-view标签里边，聚焦键盘弹起后，滑动页面，当前聚焦的input标签会跟着滑动。解决方案：同样是曲线救国，聚焦的时候设置上层的元素隐藏，（如果是弹框的话，弹框弹起的时候设置input隐藏）在网上搜的用官方给的always-embed属性，但是也明确标注了只有ios可用。解决方案：曲线救国，聚焦或点击的时候禁止页面滚动，失焦的时候放开。场景1：多个input标签切换无法聚焦问题。场景3：input标签聚焦会覆盖其它的元素。
小程序踩坑日记1-----input聚焦问题
qq_40457310的博客
07-15 6216
问题：微信小程序开发工具上测试input有的电脑会有点击input无法聚焦，光标闪一下就消失，但是如果你点击input上面一点的位置就会获得焦点，很奇怪。经过查阅，这个问题跟代码无关，是电脑显示的缩放与布局造成了在开发工具上的显示问题，但是并不会影响实际生产，所以无需担心。解决方法：如果能够适应改变缩放与布局带来的视觉冲击，本人建议修改一下，win10修改的很简单，1.在桌面右击，选择显示设置2....
【uniapp】关于小程序输入框聚焦、失焦（输入法占位）的问题
feifeiyechuan的博客
09-05 4215
聊天小程序，界面带有输入框，当输入框中聚焦后，底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下，输入框此时会被输入法覆盖掉。
微信小程序input标签详解
ct5211314的博客
09-06 9637
在微信项目开发中，input标签用的地方很多，包括用户信息的录入，用户的查询操作等等，那input标签怎么能够快速的上手，熟练的使用呢？希望这篇文章可以帮助到你。 一、input框常用事件 1.input框获取焦点事件（bindfocus） 常用在用户获取到焦点时，获取input框中的数据，进行存取或判定。 <input type="text" bindfocus="_bindfocus"/> //获得焦点事件 ...
126-微信小程序-搜索框.zip
最新发布
06-11
在微信小程序中，我们可以使用`<input>`组件来创建一个搜索框。这个组件支持多种事件，如`bindinput`（输入时触发）、`bindfocus`（聚焦时触发）和`bindconfirm`（点击完成按钮时触发），这些事件可以帮助我们实现...
微信小程序修改自定义input
03-29
在微信小程序中是不能修改input样式的 甚至修改大小也不能，那么怎么做一个自定义样式的input呢 说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap...
微信小程序-两个input叠加，多次点击字体变粗或闪动
03-29
问题描述： 当两个input叠加，多次点击input框， placeholder 字体变粗或input框闪动。如图： (此图片来源于网络，如有侵权，请联系删除! )   代码：   <!-- 最上层input-1 --> <input placeholder='\u8...
微信小程序 input输入框详解及简单实例
08-31
在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、身份证号、日期等，满足不同场景的需求。以下是对`input`组件的详细解释及其相关实例。 ### 1. `input`基本...
微信开发者工具input无法聚焦输入文字问题记录
柑橘乌云_
06-24 605
写微信小程序时碰到微信开发工具里的input输入框无法输入文字 ，发现键盘的tab键可以让input获取焦点，暂时只发现了这一个方法。
解决微信小程序input中focus为true时无法自动聚焦的问题
Zsl1183323的博客
05-08 2116
无法聚焦的原因是因为输入框无法调用手机键盘，使该属性不生效。但在手机端可以调用手机键盘，该属性就能生效。在开发工具中不生效，但在手机真机调试时可以生效。
微信小程序聚焦，点击文字聚焦
Thea12138的博客
03-11 2237
对于左侧是laber文字的的输入款，想要实现点击文字输入框也可聚焦的效果。 <view class="weui-cell" bindtap="cellfocus"> <view class="weui-cells-title left">单位</view> <input class="weui-input {{rUnit}}" ty...
微信小程序当在一个页面有多个input输入框，自动弹键盘，需要点击input框2次才能聚焦的问题
weima9977的博客
10-21 5226
微信小程序input点击2次才能聚焦的问题
小程序输入框聚焦、失焦和键盘高度变化事件
互联网从业者/大数据架构师/全栈开发者
05-10 6115
本文着重讨论不同场景下输入框获得或失去焦点时，事件处理器的执行顺序。
小程序input获得焦点触发_小程序如何通过js让input获取焦点从而弹出软键盘？
weixin_39752880的博客
12-20 1850
如何不点击input框也能通过js来让input获取到焦点？如何设置focus？初次进入页面时会弹出软键盘，收起软键盘之后，怎么再次调起软键盘？页面中的input写法为：给页面中的某view元素添加点击事件：openKeyboard点击事件的内容：openKeyboard() {this.focus = true;}在data中设置变量focus，默认为true，用来控制input的获取焦点：da...
【微信小程序】input输入框（87/100）
lichong951的专栏
07-18 5572
简单的点胜过复杂的高明
微信小程序循环input
05-31
你可以使用wxs模块中的for循环来实现微信小程序中input框的循环。具体步骤如下： 1. 在wxml文件中使用for循环生成input框，代码如下： ``` <view wx:for="{{inputList}}" wx:key="{{index}}"> <input placeholder="请输入" value="{{item}}" bindinput="inputChange" data-index="{{index}}" /> </view> ``` 其中，inputList是一个数组，里面存放了每个input框的值。 2. 在js文件中定义inputList数组，并在页面加载时初始化inputList，代码如下： ``` Page({ data: { inputList: [''] }, onLoad: function () { this.setData({ inputList: ['', '', ''] // 初始化3个input框 }) }, inputChange: function (e) { const index = e.currentTarget.dataset.index const value = e.detail.value const inputList = this.data.inputList inputList[index] = value this.setData({ inputList: inputList }) } }) ``` 其中，inputChange是input框值改变时的回调函数，它通过e.currentTarget.dataset.index获取当前input框的下标，并通过e.detail.value获取当前input框的值，最后更新inputList数组并更新页面数据。 这样，就可以实现微信小程序中input框的循环了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值