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

在项目中做移动端页面，发现IOS 的光标大小很大，和安卓的完全不一样，思考怎么调整大小，通过实践和尝试，找到了解决方法，现分享给大家。

修改前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;
 width: 70%;
 font-size: 14px;
 color: #333;
 border: none;
 outline: none;
 line-height: 20px;
}

Android和iOS手机修改前后的效果：

其实，只是调整了line-height的大小，就解决了iOS和Android手机input光标大小不一致的问题。

总结

以上所述是小编给大家介绍的解决ios手机中input输入框光标过长的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • h5 ios输入框和键盘的兼容性优化指南

    起因 h5的输入框引起键盘导致体验不好,目前就算微信.知乎.百度等产品也没有很好的技术方案实现,尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好,这个问题也是老大难问题了.目前在准备一套与native协议 来解决这个问题,目前项目中的解决方案还是有值得借鉴的地方的,分享一下 下面话不多说了,来一起看看详细的介绍吧 业务场景 固定在h5页面底部的输入框 无论是使用 <input /> 还是 <div contenteditable="true"> &l

  • iOS实现聊天输入框功能

    经常使用微信聊天,没事儿就会想输入框的实现过程,所以抽空,也实现了一个输入框的功能: 经过封装,使用就非常的简单了,在需要的VC中,实现方法如下: - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor colorWithRed:0.92 green:0.92 blue:0.92 alpha:1.00]; self.keyView = [[DKSKeyboardView alloc] init

  • iOS中输入框设置指定字符输入的方法

    前言 对于开发者来说,在很多情况下,一般的输入框需要按照要求进行输入,输入内容由开发人员来指定.例如:密码输入框只能输入纯数字或者是拼音与数字结合的文本等,那么我们在开发的时候就需要做一些输入文本的限时.下面话不多说了,来一起看看详细的介绍吧. 一.只能输入纯数字 在这里以UITextField为例:其实现代码如下: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range re

  • IOS 键盘挡住输入框的问题解决办法

    IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text

  • iOS输入框的字数统计/最大长度限制详解

    iOS输入框的字数统计/最大长度限制详解

    前言 前两周我们发了一个小集「iOS 自带九宫格拼音键盘与 Emoji 表情之间的坑」,介绍了如何解决由于输入框限制 Emoji 表情的输入导致中文拼音也无法输入的问题. 后面我们又有了新需求:对输入框已输入的文本字数进行实时统计,并在界面上显示剩余字数,且不能让所输入的文本超过最大限制长度.但这个简单的功能仍然有不少小坑. 在上一个小集中,我们讲到,对于 iOS 系统自带的键盘,有时候它在输入框中填入的是占位字符(已被高亮选中起来),等用户选中键盘上的候选词时,再替换为真正输入的字符,如下:

  • iOS项目开发键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发过程中,一般用于进行输入信息的有两类:UITextField和UITextView,前者是单行输入文本框,后者是可滑动的多行输入文本框,在这整个开发过程中,我们需要控制键盘的弹出和收起.在输入结束的时候获取输入的信息,此外,我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框.今天,我们就主要来说一

  • iOS使用UIKeyInput自定义密码输入框的方法示例

    iOS使用UIKeyInput自定义密码输入框的方法示例

    前言 开发中很多地方都会遇到密码输入,这时候往往需要根据UI设计自定义.这里遵守UIKeyInput,实现协议中的方法,让自定义View可以进行文字输入:再通过func draw(_ rect: CGRect)绘制现自定义UI:使用配置类来统一接口:使用代理来管理各种输入相关的事件.文章末尾有提供OC和Swift双语的CLDemo下载,这里讲解就使用Swift. 1.遵守UIKeyInput协议,实现文字输入 遵守UIKeyInput协议,实现协议中- (BOOL)hasText. - (voi

  • iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

    iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

    目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下. 让你的自定义View具备输入的功能(UIKeyInput协议) 通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了.UIKeyInput协议必须实现的有三个方法,分别是以下方法: #pragma mark - UIKeyInput

  • iOS输入框(UITextField)密码明暗文切换方法

    在做明暗文切换(密码输入框)的时候遇见一个坑,就是切换secureTextEntry的时候,输入框的光标会偏移,下面列出了一个解决办法及一种明暗文切换的方法 - (IBAction)pwdTextSwitch:(UIButton *)sender { // 前提:在xib中设置按钮的默认与选中状态的背景图 // 切换按钮的状态 sender.selected = !sender.selected; if (sender.selected) { // 按下去了就是明文 NSString *temp

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

    在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前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部分代码

  • bootstrap布局中input输入框右侧图标点击功能

    bootstrap布局中input输入框右侧图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的: 那么问题来了,怎样让这些小图标能够获得点击事件呢? 我也不知道,但是可以用一种迂回的方式,来间接的实现该功能. ***重点来了: 解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框:相当于给小图标盖了一个透明的被子: 复制代码 代码如下: <di

  • 详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

    详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

    HTML5+canvas进行移动端手机照片上传时,发现iOS手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,这里主要用到Orientation属性. Orientation属性说明如下: 下面就直接上代码了. 主要有html5页面和一个js,示例功能包含了图片压缩和旋转. 自己写的是uploadImage.js. html5测试页面

  • iOS11.3以下modal中input光标错位的解决方法

    先看一下错位的效果: 这本是iOS系统的一个BUG,不过在iOS11.3以后的系统中修复了: 解决办法: 在body标签中添加样式: body { position: fixed; width: 100%; } 或者 body { overflow: hidden; height: 100%; } ios11,弹出层内的input框光标错位 之前开发了一个微信项目,安全上线,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position:

  • 使用scrollTop(）解决IOS中输入法遮挡输入框问题

    经过测试,发现有的IOS浏览器上输入法会弹出遮挡输入框,网上很多都是介绍用以下方法 (function() { $('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function(){ target.scrollIntoView(true); },100); }); 但是由于本人对scrollIntoView的理解不够一直没有解决问题,后来用相同的思路使用scroll

  • 解决ios h5 input输入框被输入法弹出一块区域的问题

    问题:如下图 解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐 /** * * 使用方法 输入框中 onclick="sr(this);" onblur="nosr(this)" */ var timer1; function sr(obj) { timer1 =

  • Vue项目中input框focus时不调出键盘问题的解决

    目录 input框focus时不调出键盘问题 自动获取input焦点(内含ios不能唤起键盘解决方法) 最开始的用法 如果想要解决ios不生效办法 input框focus时不调出键盘问题 在移动端,实现input框获得焦点的同时不会唤起手机键盘. 亲测有效!!! <input type="text" placeholder="收货地址" v-model="address3" @focus.prevent="showcountF&q

  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

    在用vue-cli脚手架搭建手机H5页面应用的时候,其中一页中部有input,底部有position:absolute:bottom:0的元素, 当点击input框时在安卓手机上出现了: 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用,因为这里是路由页面,根据网上的思路,吊起输入键盘的时候页面的高度是变化的,监听window.onresize,判断是否吊起键盘,然后设定底部模块的隐藏和显示,整个块元素的margint

  • 解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

  • IOS开发中键盘输入屏幕上移的解决方法

    在IOS开法中经常会遇到键盘遮挡屏幕的事情(比如输入账号密码验证码等等),就使得原本都不大的屏幕直接占了一半甚至更多的位置,这倒无所谓,关键是挡住了下面的按钮.这样的话按钮的事件也就触发不了,最好的解决办法就是当输入这些信息的时候让整个屏幕上移一个键盘的位置,或者上移到指定的位置. 首先一般输入的话都用的是UITextField,所以要监听用户什么时候开始输入和什么时候结束输入,直接设置代理代理就行了,要遵受 UITextFieldDelegate协议. //遵循协议 @interface Vi

随机推荐