IOS11下fixed中input光标错位问题

项目遇到了这个问题,故作了个临时解决方案,暂时没有想到更好的方法,查阅了网上的方案,也没有找到完美的解决方案. 方案思路: ①弹窗打开时,阻止 body 滚动,禁用 touchmove ,同时记录当前 body 的滚动高度 startScrollTop ②弹窗关闭时,恢复 body 滚动,同时给当前滚动条赋值 startScrollTop ,恢复到弹窗前的高度 ③关闭输入键盘时,同样恢复到弹窗前的高度实现的代码如下: <!DOCTYPE html> <html> <head…

苹果手机iOS11中fixed弹出框中input光标错位问题

最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的资料,终于在几篇中文文章中找到了问题的大致方向在于"fixed定位的弹出框在苹果手机系统中有问题”,但是并没有很好的解决方法,解释的bug原因也个有千秋.最后,我谷歌了“fixed input cursor"之类的关键词,终于找到了一篇英文的详细解答(文章链接),并且我也验证了其中的正确性…

IOS中input光标跑偏问题的解决方法

ios端兼容input光标高度处理在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子添加了height和line-height 当点击输入的时候,光标的高度就自动和父盒子的高度一样了.(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部). 解决办法:去掉父盒子的高度heig…

ie中input光标问题

为input 添加 readonly=”readonly” UNSELECTABLE="on" 属性. IE中设置了readonly=”readonly”,点击使用日期选择器时input框中仍然出现了光标,添加 UNSELECTABLE=”on”后,消失.…

input光标错位

文档结构 <div class="noteWrap"> <input type="text" placeholder="写留言" /> <img src="images/camera.png" /> </div> 设置样式: .noteWrap{ height: 50px; } input{ line-height: 50px; } 在ios上出现输入文字前光标占满输入框,输入文…

解决IE下readonly的Input光标选中的问题

首先用unselectable="on"解决,但是这种方法bug太多, 屏蔽了input的onblur事件(也就是focus事件在Angualr下),所以只能用click事件来代替了. input元素在IE (chrome还是可以编辑的,其他浏览器没有尝试)下不能被选中了,对于可编辑的input框来说这是致命的问题. 火狐浏览器不管用. 不能清除placeholder的内容所以暂时用jq的blur()失焦事件来解决的,有什么问题或者有更好的方案,欢迎留言...…

input 光标在 chrome下不兼容解决方案

input 光标在 chrome下不兼容解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type=text] { width: 304px; height: 52px; line-height: normal; line-height: 52px\9; border: none; color: #FFFFFF; background: url(../images/txt-bg.pn…

在IOS11中position:fixed弹出框中的input出现光标错位的问题

问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题解决方案一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: 1.判断手机机型:Android or ios ios11 or ios其他 /*ver 是IOS的版本,如果是Android ver就不是数组*/var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); if(Arr…

ios11，弹出层内的input框光标错位键盘弹出时，输入信息，光标一直乱跳

之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textarea输入框,ios11系统的苹果机用户在点击输入框,出现键盘后,弹出层被顶上去,而光标还停留在原处,即出现错位情况. 解决思路: 解决光标错位:弹出层设置为position: absolute:body添加position: fixed; 弹出层重新定位:获取滚动条高度,设置为弹出层Top值: fun…

elementUi中input输入字符光标在输入一个字符后，光标失去焦点

elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的,原因是用了局部作用域插槽,导致光标输入,table下的数据刷新, 导致table重绘,光标失去焦点解决办法是table绑定一个初始化的模拟数据,,插槽内绑定页面渲染的数据,当输入框数据变化时,table绑定的数据并没有发生变化,不会导致table重绘,页面也可正常校验…

隐藏android中EditText中的下划线以及修改光标颜色

在android开发中 EditTextText是我们经常用到的,我们使用时会有一些小问题,当我们点击输入文字时,EditText中的光标和下划线会变成粉红色. 解决方法很简单,我们只要在EditText中添加几个两个属性即可, 光标颜色的属性为 : 1 android:textCursorDrawable="@null" 当值为@null时,颜色与textcolor一致,可以自己修改颜色. 去除下划线为: android:background="@null" 一般…

如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在其他状态下为 block?

分成两种情况来说明: 如果是在 shell 即: gnome-termial终端中, 来启动或使用 vim的话, 你是无法实现这种需求的: 改变vim中的光标形状 : 在插入状态下显示为 beam, 而在其他状态下为 block? 因为 shell下的vim 其光标始终是由 shell 来决定的, 也就是说, vim 不是独立的程序, 它只是寄人篱下, 所以 shell的光标将始终由shell 来决定, 跟 vim 一点关系都没有, vim 对光标没有影响, 所以, 在she…

native-base中Input,Textarea等组件在ios平台下不能输入中文

在上文react-native中TextInput在ios平台下不能输入中文已经解决. 但是在native-base中Input和Textarea都存在这样的问题.为了不要写多个组件,封装以下代码: import React from 'react'; import PropTypes from 'prop-types'; import { Platform, } from 'react-native'; import { Textarea, Input, } from 'native-base…

vue中input输入第一个字符时，光标会消失，需要再次点击才能输入

vue中input输入第一个字符时,光标会消失,需要再次点击才能输入在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染,并且立即重置input 的初始状态,导致光标消失,需要再次点击才能继续输入 v-show适合对数据的多次操作,所以把v-if换成v-show,一切问题迎刃而解…

解决ios手机中input输入框光标过长的问题

修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-size: 14px; color: #333; border: none; outline: none; line-height: 50px; } 修改后css部分代码: .receiving-info .receiving-info-list input { display: inline-block…

TextArea中定位光标位置

原文:TextArea中定位光标位置在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明细分隔符:1+1.5+2+3.4),如下图所示: 为了让输入更直观,需要在输入过程中,实时地显示汇总数量和合计:如果用户希望编辑文本中间的某条明细,也可以通过鼠标点击.或者键盘上的上下左右键来定位某个明细,并在页面上提示光标的焦点位置. 最开始,通过windows.event.x.windows.event.…

Centos7 KDE 桌面Konsole 光标错位解决方法

在使用linux 系统,桌面为KDE 时,在使用Konsole 时,光标的位置是错位的. 如下图效果解决办法用命令进入/home/cfox/.kde/share/apps/konsole 修改Shell.profile文件(有的该目录下可能没有该文件,创建该文件即可) 在该文件中添加如下内容 [Appearance] AntiAliasFonts=true BoldIntense=true ColorScheme=Linux Font=AR PL UKai CN,,-,,,,,,, [C…

Linux 中文打字软件 gtypist 光标错位解决

在windows 下有金山打字和其他的跟打软件,在Linux下找到了 gtypist 为练习中文打字,该软件分为练习模式的速度测试模式,在gtypist-2.9.5版中会出现以下几个问题: 一是在练习模式中使用中英文混合字符串的话会出现光标错位; 二是练习模式中默认使用“^"为指示打错的字的位置,练习打全角字符时会出现指示位置错位: 三是在速度模式中使用回退键会出现光标错位. 花了点时间在源码中做了些修改,重新编译安装,测试的效果还不错.在这里下载补丁. 使用方法:在gnu网站上下载gt…

JS 获取select(多选下拉)中所选值的示例代码

通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>select多选下拉取值 - www.jbxue.com</title> <meta name="Generator" conten…

IE8下div中2个button仅仅显示一个

IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" > <select name="adviceTypeOne" id="adviceTypeOne" class="shortselect" > <option value="-1">--请选择--<…

html或者php中 input框限制只能输入正整数，逻辑与和或运算

有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数代码如下: <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.len…

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关知识.让我们一起来看一下我怎么挣扎出这个大坑的. 一.背景先看一下要做什么,也就是一个文章评论的版块,下面依次有输入框,点赞,收藏等 .大概长下面这个样子: 要求也很常规,吸底,输入评论提交.那么上来就输代码吧. 二.ios下fixed布局关于这种吸底操作,上来就直接选用fixed了,这种场景舍…

pycharm中的光标变粗的问题

pycharm中的光标变粗后不能自动打成对的小括号和中括号及引号---->解决办法:按下insert键按下:insert键进行切换…

记录下项目中常用到的JavaScript/JQuery代码二（大量实例）

记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="width: 154px" class="text ml5" id="stockSearch"/> $('#stockSearch').bind('input oninput', function () { //onpropertychange var stoc…

记录下项目中常用到的JavaScript/JQuery代码一（大量实例）

一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而前端这几年风起云涌,发展很快,新的技术框架层出不穷,我也就没把心思放这块,目前公司只有前端,没有交互开发工程师,所以我们只能硬顶. 写出来的前端代码很可能没有什么模块意识,也比较混乱,有错误特别正常,希望你看到了在留言中指出来,以免误导他人,谢谢. 0.点击事件的事件函数一般要加return fal…

详解Linux下iptables中的DNAT与SNAT设置（转）

详解Linux下iptables中的DNAT与SNAT设置这篇文章主要介绍了Linux下iptables中的DNAT与SNAT设置,是Linux网络配置中的基础知识,需要的朋友可以参考下原文连接:http://www.jb51.net/LINUXjishu/402441.html DNAT(Destination Network Address Translation,目的地址转换) 通常被叫做目的映谢.而SNAT(Source Network Address Translation,源…

HTML5中input[type='date']自定义样式

HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ::-webkit-datetime-edit { padding: 1px;} /*控制编辑区域的*/ ::-webkit-datetime-edit-fields-wrapper { background-color: #fff; } /*控制年月日这个区域的*/ ::-webkit-date…

编程开发之--Oracle数据库--存储过程在out参数中使用光标（3）

在本系列学习随笔中的第2节我们留下了2个问题,我们现在讨论在out参数中使用光标. 1.要在out参数中使用光标,我们需要申明一个包的结构,包的结构分为包头和包体,包头只负责申明,包体只负责实现.包头.包体也是数据库中的对象,与表是同一级别类型. 应用场景举例:查询某部门所有员工的所有信息包头:根据以下步骤创建命名包名:mypackage: 在包中编写我们自己的存储过程或者存储函数: 按下键盘ctrl+s,sql developer将自动存盘并且进行编译: 接下来我们创建包的主体: 将会自动…

input光标位置

兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样但是在给input加入点击事件后谷歌:input框插入文字后,光标会自动到最后位置火狐:input框插入文字后,光标在插入文字的后面兼容:光标在文字的最后面 function moveEnd(obj){ obj.focus(); var len = obj.value.length; if (document.selection) { var sel = obj.…

JSP中 input type 用法

JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等.当然这也是Input的默认类型. 参数name:同样是表示的该文本输入框名称. 参数size:输入框的长度大小. 参数maxlength:输入框中允许输入字符的最大数. 参数val…

【IOS11下fixed中input光标错位问题】的更多相关文章