ios input 框自动聚焦后页面被推上去了

2024-09-03

input在IOS中的聚焦问题

关于input输入框在iPhone手机中的聚焦问题,开发中是会经常遇到的,在一般的浏览器中,我们一般是通过 document.getElementById('opop').focus(); 来获取焦点,但是在iPhone中,这样是不生效的,必须要主动触发,也就是在某个事件里面才可以触发.focus()事件: 比如JavaScript的点击事件: document.getElementById("adEventListener").addEventListener(‘click’, fu

函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求我想实现这一个需求, 父组件收到文字消息后将其传送给子组件, 子组件是一个Antd组件中的Modal, 里面只有一个input输入框, 子组件收到父组件传过来的文字消息后打开Modal对话框, 其input输入框中的默认值为父组件传递过来的文字消息, 并且自动focus到文字消息的最后, 从而方便用户输入, 当输入完之后,

在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

前些时间在做一个搜索功能时发现一个比較有意思的现象,场景是这种:在一个模态窗体中是一个订单列表.页面的顶部有若干个状态筛选框和一个搜索keyword输入框,当焦点在keyword输入框时按回车,本来是对input的keyup事件做了监听.当发现是按了回车键时便自己主动提交搜索请求的,但输入keyword后按回车时页面居然跳转了.而且出现"HTTP 错误 405.0 - Method Not Allowed无法显示您正在查找的页面.由于使用了无效方法(HTTP 谓词)"的错误,很纳闷.

在手机上点击input框时会放大页面

加上 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width"> 就可以了 content属性值 : (1)width:可视区域的宽度,值可为数字或关键词device-width: (2)height:同width: (3)intial-scale:页

vue中让input框自动聚焦

created(){ this.changfouce(); }, methods: { //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中, //因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作是徒劳的,所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中. changfouce(){ this.$nextTick((x)=>{ //正确写法 this.$refs.inpu

vue input框数字后保留两位小数正则

<el-input type="text" v-model.trim="ruleForm2.marketPrice" maxlength="10" @keyup.native="ruleForm2.marketPrice =ruleForm2.marketPrice = ruleForm2.marketPrice.replace(/[^\d.]/g,''); ruleForm2.marketPrice = ruleForm2.ma

IOS input框轻点无效修复方法

FastClick.prototype.focus = function(targetElement) { targetElement.focus();//加入这一句话就OK了 };

fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后，页面上移，点击不了)

FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastclick可以使用npm,Component和Bower.另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package. npm install fastclick import FastClick from 'fastclick'; Vue.

ios兼容 input输入时弹出键盘框页面整体上移键盘框消失后在ios上页面不能回弹的问题

前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法:给input加blur事件,代码如下: $('input').on('blur', function () { setTimeout(function(){ var scrollHeight = document.documentElement.scrollTop || document.body.

IOS微信点击input弹出输入法，关闭后页面留白解决方案

场景:IOS用微信点击input框弹出输入法后不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局解决方法: 给input添加blur(失去焦点)事件,让页面强制回滚,距离为0,代码如下 $("input").blur(function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; }); 原文出处:https://blo

兼容h5在ios上登录窗口input失焦后页面不会滚

$("#logincode").blur(function(){ //滚动到顶部 window.scrollTo(0, 0); })一般多用于密码框失焦后,页面不回滚

[BUG]微信浏览器 iOS input 失焦页面不回弹

描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如图解决方案 input onblur 让body滚动,页面回弹 function inputBlur() { if (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) { let speed = 1; setTimeout(fu

解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）

前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失.所以只要在输入完毕后模拟一下这个“滚动”的操作,就能解决问题了. 如果是用vue写的: <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加:

input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了很多方法尝试,最后是用css解决的. 就是给input框所在div的以外代码块一个position: fixed; top: 0px; bottom: -20px; overflow:scroll; width: 100% 例如你的代码结构是这样的: <style> .footer{positio

js input框输入1位数字后自动跳到下一个input框聚焦

// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); for(var i = 0; i<txts.length;i++){ var t = txts[i]; t.index = i; t.setAttribute("readonly", true); t.onkeyup=function(){ this.value=this.value.

h5 页面点击添加添加input框

h5 页面点击添加添加input框前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的效果图,加号增加,减号减少直接上代码, 用来bootstrap的组件 div部分 <div class="container col-md-8" style="margin:100px"> <form id="mom" class="form-horizonta

【JS】实时监控页面，input框数值自动求和

需求: 有一个页面需要将input框填入的各个费用自动相加,添加到“合计费用”里. 解决方案: 使用jquery的blur实践,每个费用的Input框检测到失去焦点时,将所有的input框数值相加求和,然后写入到“合计费用”框中代码: HTML代码如下所示  <div class="form-group"> <label class="col-xs-2 control-label">管理费</label

鼠标点击input框后里面的内容就消失

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标点击input框后里面的内容就消失</title> </head> <body> <input type="text" size="18" value="这是默认的内容" onfocus="if

ios端，input框，汉字输入不上问题

input{ -webkit-transform: translate3d(, , ); } 在input框上加上这段代码就可以了另外,我在一个页面上,用一个开关去控制一部分内容显示隐藏与显示时,当我隐藏该隐藏的内容后,不该隐藏的内容也隐藏了,就发现加过上面样式的input框不受影响,于是,我把全部元素都加上了这个css ,也就是把input变成了*,问题解决了,看来这个样式挺有用的, 特别是在ios12+的时候,赶紧记下.

el-mement表单校验-校验失败时自动聚焦到失败的input框

思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方调用this.$refs[formName].validate()时的具体操作: field信息: 内部‘field’信息: 验证失败的返回值invalidFields信息: 问题:如何根据校验失败的field定位到相应的input框? 返回的校验失败的对象信息,只包含了prop的名字和失败的提示信息,根据这两项无法获取到对应的input

element 表单校验失败自动聚焦到失败的input框

1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素 <el-form-item label="课程名称" :label-width="formLabelWidth+'px'" prop="title"> <el-input ref="title" v-model="form.title" placeholder="请输入课程名称" autoco

ios input 框 自动聚焦后页面被推上去了

热门专题

ios input 框自动聚焦后页面被推上去了