解决小程序Input框输入文字后触摸并滚动屏幕不松开，input内文字一起滚动问题

最新推荐文章于 2023-05-09 16:09:25 发布
最新推荐文章于 2023-05-09 16:09:25 发布
阅读量2k 收藏 5
点赞数 3
分类专栏： 小程序 input 文字滚动 文章标签： 小程序 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46452514/article/details/107513300
版权
小程序 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
input
1 篇文章 0 订阅
订阅专栏
文字滚动
1 篇文章 0 订阅
订阅专栏

在这里插入图片描述
在Input内输入文字后，键盘此时还是抬起状态，此时轻触屏幕空白处，不松手滑动屏幕，input内的文字会跟着一起向下滑动。
解决方法：给最外层的View标签添加onTouchStart事件，开始触摸时，触发收起键盘事件。

onTouchStart={()=>{
    Taro.hideKeyboard()
}}
Tiamo酱
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发问答《四十九》input空间输入文字如何清空 & 时间处理问题 ..
03-29
1、微信小程序中 input空间输入文字如何清空作者：huangmeimao 场景：希望读取input控件的输入内容之后，清空输入框的内容。由于本人是js小白，整整花了一两个小时都没找到方法。原来微信小程序不支持document通过id...
微信小程序 input输入及动态设置按钮的实现
08-29
微信小程序 input 输入及动态...本文详细介绍了微信小程序 input 输入控件的基本使用方法和动态设置按钮的实现，并提供了相关的代码示例，以便帮助开发者更好地理解和实现微信小程序 input 输入及动态设置按钮的功能。
解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动，飘起来了。
一键写代码的博客
06-17 3139
bug 类型效果： 输入框内的文字跑了。 解决办法： 测试了网上的监听滚动事件，手动调用wx.hideKeyboard等方式，都不好使。 大概原因： 在页面出现滚动时，输入框跑了。 如果不是滚动页面，不能滚动，就不会出现。 刚开始整个外层标签是<view></view>， 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。 原因可能和小程序原生对scroll-view内的input等滚动做
微信小程序滑动后搜索框内容会上移
HuaiXiaoAi的博客
05-09 390
当内容可以滚动后，input在被点击时，里面的内容会被顶上去，只需要改一下con的标签就可以。我们只需要将内容放在scroll-view标签中即可不让外面的input受到滚动的影响。你的页面布局可能是这样的。话不多说，直接上代码。
记uniapp 自定义input 获得焦点键盘弹起时 input 输入框 跟随页面滚动问题
weixin_43073383的博客
11-22 2643
前言：最近在做im聊天，使用uniapp 的scroll-view 写list 使用scroll-into-view 做锚点滚动，需求是聊天时获得焦点，要和微信那样只滚动聊天记录，而不是使用input 的adjust-position 自动上推页面；使用uni.onKeyboardHeightChange监听键盘高度变化 ；用fiexd 定位input 的位置，但是在ios 运行，input 会莫名其妙的滚动页面，似乎还不是跟随scroll-view滚动，具体没有深入探究 解决此问题使用@touchmov
小程序--scrollview同时滚动--wxs响应事件
hanchengmei的博客
04-29 848
需求： 滚动一个view, 另一个view同时滚动 方案一： 用两个scroll-view, 当a滚动时获取scrollTop并赋值给b的scrollTop，但是会出现延迟并抖动 方案二：用WXS响应时间 官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html 思路：1滚动时，改变box-in的top 最终的效果比较流畅 ...
input输入框实现数字滚动器
黄小米的日常
08-10 1883
在很多地方我们能看到一些数字变换比较快的数字滚动器，一般数字滚动器有两种，一种是一个值一直在原位发生改变，另一种则是每个数字都有自己的位置，当发生变化时向上或者向下有0-9的滚动效果，今天我们来讨论第一种。 其实数字变化一些人用的可能是动态的每过几十或者几百毫秒进行重新复制，但是有一个更简单性能开销更小的方法，input的stepUp()与setDown()方法。 stepUp与stepDown...
微信小程序input框中加入小图标的实现方法
08-27
微信小程序input框中加入小图标的实现方法 微信小程序input框中加入小图标的实现方法是一种常见的需求，特别是在登录注册页面中。通常，我们可以使用background-image属性来实现，但是微信小程序中并不支持这种方法...
详解小程序input框失焦事件在提交事件前的处理
10-17
主要介绍了详解小程序input框失焦事件在提交事件前的处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js 特效 html 特效 Input框中的滚动信息
06-13
js 特效 html 特效 Input框中的滚动信息
uniapp 微信小程序和H5的弹窗滚动穿透解决
坐等夕阳落time的博客
10-17 1万+
uniapp 微信小程序和H5的弹窗滚动穿透解决（真的有效）
微信小程序实现搜索框以及踩过的坑
热门推荐
babulongbo的博客
03-22 1万+
先上代码： wxml: &lt;!-- 顶部搜索框 --&gt; &lt;view class="inputcontainer"&gt; &lt;view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}"&gt;搜索商品&lt;/view&gt; &lt;view
input不管用 vue_使用Vue-scroller页面input框不能触发滑动的问题及解决方法
weixin_35988178的博客
01-12 312
因为项目中有个填写信息的页面，有很多input框，引入vue-scroller后发现在input区域滑动失效；看了一下引入的vue-scroller组件里的源码，发现在组件源码里的Scroller.vue中在touchStart、touchMove和mouseDownd方法的时候被return了touchStart(e) {// Don't react if initial down happen...
css输入框内容过长怎么隐藏,input下拉框内容过长被隐藏显示，部分机型无法进行滑动显示。...
weixin_36257834的博客
08-03 696
input下拉框内容过长被隐藏显示，部分机型无法进行滑动显示。<li><div class="item-content"><div class="item-inner"><div class="item-title label">户口所在地</div><div class="item-input"><input clas...
微信小程序入门使用及常见问题整理（例如：scroll-view 横向滑动不生效）
weixin_44258964的博客
09-15 1207
微信小程序入门使用 常见问题解决
最近踩过的坑-- ios移动端
qq_40088412的博客
06-02 1068
input标签，文字过长时不能滑动显示（ios） 场景：input标签——设置disabled后，在Android端可以滑动展示，在ios端文字过长时不展示。 在网上查询资料后发现，ios端的input文字不能左右滑动，可以通过拖动光标进行移动，设置了disabled后，没有光标便不能滑动文字了。 解决方案： 简单粗暴的换了标签 不使用input input标签，光标过长（ios） 原因：设置line-height会影响ios的光标长度，对Android无影响 解决方案：将line-height值设小一
input获取焦点页面自动滚动
wzzehui的博客
07-23 5325
微信下测试无问题 /*监听input状态，屏幕滚动到input，上下居中 *在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。 *然后定位到input框。 */ window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ ...
小程序 input键盘弹出时，滚动页面，输入框内容错位问题
记录美好生活
06-16 4508
页面中内容超过一屏的时候，滚动到底部或者中间，只要是超过一屏的地方，—input聚焦的时候就会把焦点弹到页面最顶部 我现在是直接写的一个包裹元素，然后给样式 height:100%; overflow:scroll; box-sizing: border-box; padding-bottom:80rpx; 解决办法是：把最外层的包裹元素换成下面代码，然后把样式height:100%;overflow:scroll;去掉！！！ view: <scroll-view scroll-y=
解决Uniapp 小程序 input框添加正则 限制只能输入数字
最新发布
06-09
您好，要实现在Uniapp小程序中input框只能输入数字，可以通过以下方式添加正则表达式限制： 1. 在input标签中添加onInput事件监听： ```html <input type="number" @input="onInput"/> ``` 2. 在Vue组件中添加onInput事件处理函数，并在该函数中使用正则表达式过滤非数字字符： ```js methods: { onInput(event) { let inputVal = event.target.value; inputVal = inputVal.replace(/[^\d]/g, ''); // 正则表达式过滤非数字字符 event.target.value = inputVal; } } ``` 这样就能实现在Uniapp小程序中input框只能输入数字的限制。如果您不想使用type为number的input，可以使用正则表达式限制input框只能输入数字： ```html <input type="text" @input="onInput"/> ``` ```js methods: { onInput(event) { let inputVal = event.target.value; inputVal = inputVal.replace(/[^\d]/g, ''); // 正则表达式过滤非数字字符 event.target.value = inputVal; } } ``` 以上代码中，使用了JavaScript的replace方法和正则表达式/[^\d]/g，将所有非数字字符替换为空字符串。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值