微信小程序之 input 聚焦问题

最新推荐文章于 2024-06-18 22:27:44 发布
最新推荐文章于 2024-06-18 22:27:44 发布
阅读量6.2k 收藏 3
点赞数 7
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weidong_y/article/details/86519927
版权

很多同学在使用微信开发者工具进行开发的过程中，使用 input 标签时都回面临到一个聚焦不了问题，导致无法在 input 中输入文字。关于这个问题，是微信开发者工具的一个 bug。只需要把电脑屏幕的显示比例修改为 100% 就行。

程序东
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序 文本框 聚焦样式改变
sogi1212的博客
03-21 1万+
实现结果：wxmL: <view class='search'> <input placeholder-class="{{status==0 ? 'placeholder':'placeholder-active'}}" placeholder='搜索科室' bindfocus="focus" bindblur='blur'></input> ...
微信小程序Input组件聚焦问题兼容
踩坑之路
07-16 4510
微信小程序Input组件聚焦问题兼容 前言 最近小程序做得很频繁，无论是原生的还是使用跨端框架。然后一直以来都被小程序的Input组件搞得死去活来，最近在搞的小程序普遍都有表单，其中的Input清除内容以及聚焦弹起键盘的兼容坑得我死去活来，小程序的Input组件我愿称其为最坑组件，没有之一。 需求 先说一下要实现的需求，就是实现一个Input框的清除按钮，要求清除Input框内容并且在清除内容后自动弹起键盘，要求清除按钮只有在输入框聚焦且内容不为空时显示。需求很容易理解，且我一开始以为很简单。。。 实现过程
微信小程序修改自定义input
03-29
在微信小程序中是不能修改input样式的 甚至修改大小也不能，那么怎么做一个自定义样式的input呢 说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap 事件来更换图片的路径实现 首先请求后台接口获取数据   wx.request({ url: imgsrc + '/wechar/product/getproduct', data: '', header: {}, method: 'GET', dataType: 'json', responseType: 'text', success: fu
uni-app input框不能聚焦问题！
最新发布
SCHOLAR_LIAO的博客
06-18 196
盘点一下uni-app input框聚焦的巨坑，之前无论如何都没办法给input框聚焦，直到看到了有人说滞后性，又开始用setTimeout函数试试了一下，结果发现只有第一次能聚焦，再点就不行了！后来就想了一个屎山代码解决方式！没想到真的解决了，分享给大家！哈哈哈哈哈哈哈哈哈！没有这句真他妈不行，搞了好久心态都蹦了好几轮!不然就只能查Dom元素方式。
微信小程序中input控件自动聚焦、软键盘的关闭和打开
热门推荐
huangmeimao的专栏
07-26 8万+
input控件除了获取和显示用户输入的语句，很重要的一个功能是聚焦和键盘使用，下面就相关属性做详细地介绍： cursor-spacing:   类型：Number 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离auto-focus:true 类型：Boolean 自动聚焦，拉起键盘
微信小程序使用input标签遇到的问题
qq_41687299的博客
05-17 566
场景2：input标签在scroll-view标签里边，聚焦键盘弹起后，滑动页面，当前聚焦的input标签会跟着滑动。解决方案：同样是曲线救国，聚焦的时候设置上层的元素隐藏，（如果是弹框的话，弹框弹起的时候设置input隐藏）在网上搜的用官方给的always-embed属性，但是也明确标注了只有ios可用。解决方案：曲线救国，聚焦或点击的时候禁止页面滚动，失焦的时候放开。场景1：多个input标签切换无法聚焦问题。场景3：input标签聚焦会覆盖其它的元素。
微信开发者工具input无法聚焦输入文字问题记录
柑橘乌云_
06-24 607
写微信小程序时碰到微信开发工具里的input输入框无法输入文字 ，发现键盘的tab键可以让input获取焦点，暂时只发现了这一个方法。
小程序input获得焦点触发_详解小程序input框失焦事件在提交事件前的处理
weixin_39610631的博客
12-20 1511
无论是小程序还是平常的Html页面，input文本框我们用到的次数都很多，这一篇文章主要是讲关于小程序中文本框聚焦自动拉起输入键盘的一些使用心得。为什么我需要聚焦拉起键盘呢？为什么我弃用失焦事件呢？因为在我的小程序文章中提供了评论文章的功能，昨天空闲下来我想将回复评论的功能也做一下，我想让回复和评论同时共用一个文本框如下图一，我来说明一下的操作：当我们进入文章界面的时候，输入框模式默认是评论文章的...
小程序：小程序获取焦点事件
轻风细雨_林木木
09-06 6994
https://blog.csdn.net/longfeng1234/article/details/94633176 1.tap事件：这个是小程序中的点击事件，绑定语法是bindtap，微信小程序中每个组件都是有tap事件的； 2.input事件：是键盘输入事件，绑定语法是bindinput； 3.focus事件：输入框聚焦事件，绑定语法是bindfocus； 4.blur事件：输入框...
微信小程序 input输入框详解及简单实例
08-31
在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、身份证号、日期等，满足不同场景的需求。以下是对`input`组件的详细解释及其相关实例。 ### 1. `input`基本...
carnumber_input_微信小程序_车牌_
10-04
本项目"carnumber_input_微信小程序_车牌_"聚焦于创建一个特定的输入组件，专门针对车牌号码的输入场景。 一、微信小程序开发基础 1. 微信小程序框架：微信小程序基于WXML（Weixin Markup Language）和WXSS（Weixin...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
微信小程序之登陆界面
12-02
首先，我们要理解微信小程序的基本架构。小程序使用的是基于 JavaScript 的 WXML（WeiXin Markup Language）和 WXSS（WeiXin Style Sheet）来构建用户界面，配合 JSON 配置文件进行页面路由和数据管理。在创建登陆...
微信小程序-input聚焦问题
ChibiMarukoChan的博客
09-30 5699
问题描述：在微信开发者工具中，有时候点击input输入框无法聚焦，光标闪一下就没了 解决办法：在input框长按鼠标 或者点击input输入框上面一点 参考别人大概问题是电脑显示的缩放与布局造成的，不影响实际使用。 window10的解决方法： 桌面右击，选择显示设置 选择缩放与布局，改为100% ...
【小程序】文本框聚焦时，弹出的键盘遮挡住文本框如何处理
九日的博客
12-07 1272
现在需要实现一个功能，当在微信小程序点击聚焦输入框时，页面自动滚动，使输入框显示在弹出的键盘上方，避免被键盘遮挡。iso的微信小程序自带这个优化，不需要额外处理。安卓或其他系统的微信小程序需要这个处理。
小程序踩坑日记1-----input聚焦问题
qq_40457310的博客
07-15 6220
问题：微信小程序开发工具上测试input有的电脑会有点击input无法聚焦，光标闪一下就消失，但是如果你点击input上面一点的位置就会获得焦点，很奇怪。经过查阅，这个问题跟代码无关，是电脑显示的缩放与布局造成了在开发工具上的显示问题，但是并不会影响实际生产，所以无需担心。解决方法：如果能够适应改变缩放与布局带来的视觉冲击，本人建议修改一下，win10修改的很简单，1.在桌面右击，选择显示设置2....
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
奔跑吧代码
09-04 1515
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
微信小程序实现input自由选中内容(已封装)
盛国强的博客
08-29 5409
老规矩先来看看效果噻！ 从上面的录屏中我们可以看出，要实现input自由选中内容的功能是可以实现的，原理其实很简单。 从微信小程序官方文档（input组件）中我们可以发现： https://developers.weixin.qq.com/miniprogram/dev/component/input.html 没错！这就是input选中内容的方法。但有一个小问题，正如文档所言，只有自动...
【uniapp】关于小程序输入框聚焦、失焦（输入法占位）的问题
feifeiyechuan的博客
09-05 4236
聊天小程序，界面带有输入框，当输入框中聚焦后，底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下，输入框此时会被输入法覆盖掉。
微信小程序循环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、付费专栏及课程。

余额充值