2018-07-20 18:09:06 qq_18683985 阅读数 720

在工程中可能会被一些三方的键盘坑的不要不要的,比如强制打英文,结果人家三方键盘能切换中英文.那么.我们就应该强制使用系统键盘去解决这个BUG.

如何强制使用系统键盘呢.其实非常简单,在appdelegate.m里头添加如下代码即可

    //强制使用系统键盘
    - (BOOL)application:(UIApplication *)application shouldAllowExtensionPointIdentifier:(NSString *)extensionPointIdentifier {
        if ([extensionPointIdentifier isEqualToString:@"com.apple.keyboard-service"]) {
            return NO;
        }
        return YES;
    }
2017-05-01 21:23:06 qq_26300747 阅读数 6194

由于第三方键盘是先等系统键盘加载了然后覆盖的,所以高度会有二次变化,实际过程中会有三次变化,我真机用的是搜狗输入法,变化时,高度变化为0->216->253;现解决办法如下

{
    CGFloat _currentKeyboardH;
    CGFloat _transformY;
}

-(void)viewWillAppear:(BOOL)animated{
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillShow:)
                                                 name:UIKeyboardWillShowNotification
                                               object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillHide:)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
}

#pragma mark --键盘的显示隐藏--
-(void)keyboardWillShow:(NSNotification *)notification{
    //键盘最后的frame
    CGRect keyboardFrame = [notification.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
    CGFloat height = keyboardFrame.size.height;
    //需要移动的距离
    if (height > 0) {
        _transformY = height-_currentKeyboardH;
        _currentKeyboardH = height;
        //移动
        [UIView animateWithDuration:0.3 animations:^{
            self.inPutView.y-=_transformY;
        }];
    }
}
-(void)keyboardWillHide:(NSNotification *)notification{
    [UIView animateWithDuration:0.3 animations:^{
        self.inPutView.y+=_currentKeyboardH;
        _currentKeyboardH = 0;
    }];
}
2019-04-26 17:21:08 zgh0711 阅读数 1354

在 IOS 12 的系统中,在输入框中输入完内容,当点击键盘上的完成按钮时,会发现页面底部会有一大段区域变成了白色的,高度就是原来弹起的键盘的高度,这时候如果将页面上下滑动下,会发现这块空白区域又会消失,页面也恢复了正常。

当初第一次碰到这个问题时,真的是一脸懵逼,这特么是什么情况。多方查找后发现原来这不是个案,很多人都碰到过,而且也有各种各样的解决方案。

看了很多文章后发现,解决思路基本都是一样的,也就是想办法监听键盘的收起状态,在键盘收起的监听回调里面将页面滚动到顶部或底部,或者是滚动一点点。

在尝试了N多代码后,发现大部分文章中贴出的代码并没有起作用,或者是还不够完美,不能满足我的需要。

最后我总算是找到了二种算是能够比较好的解决这个问题的方法,并将它们封装为 Vue 的自定义指令,这样的话,只需要在 input 或 textarea 标签上绑定这个自定义指令就可以解决这个问题。代码如下:

import Vue from 'vue'
/**
 * 自定义指令 v-reset-page,以解决 iOS 12 中键盘收起后页面底部有留白的问题
 */

Vue.directive('resetPage', {
  inserted: function (el) {
    // 该方法有时候会出现点击了键盘右上角完成按钮,键盘收起又弹出的情况
    // el.addEventListener('blur', function () {
    //   if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //     let currentPosition, timer
    //     let speed = 1//页面滚动距离
    //     timer = setInterval(function () {
    //       currentPosition = document.documentElement.scrollTop || document.body.scrollTop
    //       currentPosition -= speed
    //       window.scrollTo(0, currentPosition)//页面向上滚动
    //       currentPosition += speed //speed变量
    //       window.scrollTo(0, currentPosition)//页面向下滚动
    //       clearInterval(timer)
    //     }, 100)
    //   }
    // })
    
    // 监听键盘收起事件
    document.body.addEventListener('focusout', () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        //软键盘收起的事件处理
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    })
  }
})

上面的代码中有二种方法,都可以达到我们的目的,但是第一种方法还是有点小瑕疵,推荐使用第二种方法。

定义好自定义指令后,只需要在 main.js 中引入就可以使用了

// main.js 中引入
import './utils/directive'

在 input 中使用

<input v-reset-page v-model="searchKey" type="number" placeholder="搜索作品编号">
2019-05-07 19:03:42 LuviaWu 阅读数 1799

h5 调起数字键盘的坑

为了限制只能输入数字,不能输入小数点、加减号,走了敲多的弯路~~(查各种资料,然后各种测试)
现下来看看笔记:

HTML5加入了新的input类型 number,这是方便数量输入的。如果是在移动端中,属性type=”number”和type=”tel”会唤起系统的数字键盘,这对于交互还是挺友好的。

一、 type="number"时

1、只允许输入数字,(兼容ios、安卓,但显示键盘不一样)

 <input type="number">

ios图:
在这里插入图片描述

2、只允许输入数字和小数点,(兼容ios、安卓,但显示键盘不一样)

 <input type="number" pattern="[0-9]*" >
 <input type="number" pattern="\d"> 
 
 对表单验证来说,这两个正则的作用是一样的,表现的话差异就很大:

iOS中,只有[0-9]*才可以调起九宫格数字键盘,\d 无效

Android 4.4以下(包括X5内核),两者都调起数字键盘;

Android 4.4.4以上,只认 type 属性,也就是说,如果上面的代码将 type=“number” 改为 type=“text” ,将调起全键盘而不会是九宫格数字键盘。

ios图:( 安卓是有小数点、加减等符号的!)
在这里插入图片描述

一、 type="tel"时

可调用(有英文字母的大概)键盘,能获取到输入的数字以及各种符号 ,能用正则表达式限制输入内容!!!一般情况下可用这个,不过还是要看个人需求了。

 <input type="tel" >

注:问题来了

由于产品要求:只能输入数字,不要小数点,不能有加减等符号,第一个数字不能为0,所以只能用:

<input type="number" pattern="[0-9]*" min='0' >

没错,因为ios只弹出0-9数字选择,但有些手机依旧有小数点、加减等符号的输入键!!!

所以,type="number"时,这数据和视图不统一的做法,真让人蛋疼,视图里面的小数点显示了,但是结果却没有。当然这在键入其他符号的时候处理的更加”劲爆”:

因为 根本获取不到小数点,以及加减等符号!想做js判断都没得,输入数字后再输入加减号后,返回的值直接为空!

1、小数点:
在这里插入图片描述在这里插入图片描述

2、加减号:

在这里插入图片描述在这里插入图片描述

所以建议在面对输入数量,而且要监控每次输入这样的需求时,尽量不好使用number的属性。

要想做到实时的对输入结果进行监控,type=number比较费劲,而type=tel只需要监控每一次的结果就ok了。

(但事实是要求要用数字键盘…试图判断了许久不行后,只好手写一个了,泪崩)


手写了个移动端键盘-(后来结果~~)

Vant组件库: https://youzan.github.io/vant/#/zh-CN/popup

引用vant组件库,底部弹出框,做好的效果如下:(还不错,判断也简单多了,需要小数点的话,也可用在左下角空格地方加上,稍做判断)
在这里插入图片描述

html:(代码是拷贝手写密码框拷贝过来的,命名勿计较,逻辑是按我的需求直接复制过来的,使用自己手动修改)

<div class="btn" @click='showPwInput2=true'>弹出数字模态框</div>
<!-- 数字键盘,输入金额 -->
<div class="num-box">
		<van-popup v-model="showPwInput2" class="pwPop" position="bottom">
			<div class="forget border-b"  @click="showPwInput2=false" style="text-align: center;padding: 0;height: 0.7rem;padding-top: 0.1rem;">
				<img style="width: 0.58rem;transform: rotateZ(90deg);display: inline;" src="../../images/icon_go@2x.png"/>
			</div>
			<div class="inputs">
				<div @click="inputNum2('1')">1</div>
				<div @click="inputNum2('2')">2</div>
				<div @click="inputNum2('3')">3</div>
				<div @click="inputNum2('4')">4</div>
				<div @click="inputNum2('5')">5</div>
				<div @click="inputNum2('6')">6</div>
				<div @click="inputNum2('7')">7</div>
				<div @click="inputNum2('8')">8</div>
				<div @click="inputNum2('9')">9</div>
				<div class="bg-gray"></div>
				<div @click="inputNum2('0')">0</div>
				<div @click="delNum2" class="bg-gray">
					<img src="../../goods/img/auctionGoodsDetail/tuige.png" />
				</div>
			</div>
		</van-popup>
	</div>

js: (导入vant组件库)

<link rel="stylesheet" href="../../css/vant.css">
<script src="../../js/lib/vue.min.js"></script>
<script src="../../js/lib/vant.min.js"></script>
data: {
	categoryMargin: '',
	num: 0, 
	inputMoney: '',
},
methods: {
	//数字键盘
	inputNum2: function(num) {
		if(this.inputMoney.length==0&&num=='0'){
			this.inputMoney = '';
		}else if(this.inputMoney.length<8){
			this.inputMoney = this.inputMoney+num;
		}
		this.categoryMargin = this.inputMoney;
	},
	//数字键盘 删除
	delNum2: function() {
		this.inputMoney = this.inputMoney.substring(0,this.inputMoney.length-1);
		this.categoryMargin = this.inputMoney
	},
}

css:

/*type为number时,隐藏右边的上下按钮*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

/*后来加上的,用的话自己稍微整理下*/
.input-num{
	width: 100%;
	height: 100%;
	text-align: center;
    line-height: 1.29rem;
    display: block;
    font-size: 0.44rem;
    padding: 0 0.2rem;
    overflow: hidden;
}
.num-box .van-modal{
	background-color: rgba(0, 0, 0, 0)!important;
}
.num-box .pwPop {
	box-shadow: 0 0 0.2rem #999;
}

/*原先编写的*/
.pwPop .tit{
	position: relative;
	text-align: center;
	height: 1.2rem;
	line-height: 1.2rem;
}
.pwPop .tit img{
	position: absolute;
	width: 0.4rem;
	left: 0.4rem;
	top: 0.4rem;
}
.pwPop .pwinput{
	display: flex;
	height: 1.29rem;
	border: 1px solid #EEEEEE;
	margin: 0.87rem 1rem 0.3rem 1rem;
}
.pwPop .pwinput div{
	width: 1.29rem;
	height: 1.29rem;
	border-right: 1px solid #EEEEEE;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.48rem;
	font-weight: bold;
}
.pwPop .pwinput div img{
	width: 0.3rem;
	height: 0.3rem;
}
.pwPop .pwinput div:nth-of-type(6){
	border-right:none!important;
}
.pwPop .forget{
	height: 0.3rem;
	padding: 0 1rem 0.65rem 0;
}
.pwPop .inputs{
	clear: both;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
}
.pwPop .inputs div{
	font-size: 0.48rem;
	font-weight: bold;
	width: 33%;
	height: 1.29rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
}
.pwPop .inputs div:nth-of-type(3n){
	border-right:none!important;
}
.pwPop .inputs div img{
	width: 0.68rem;
}
2016-11-14 19:43:02 zhu1500527791 阅读数 2666

有好长一段时间没有写移动端Web页面了,今天下午在优化公司一个原有的一个移动web商城时发现商城在IOS系统中出现顶部搜索条和底部菜单栏在页面滚动式偶尔出现错位的问题,查看源码发现是由于顶部搜索条和底部菜单栏使用的是Flex定位导致的。在此稍稍整理下思路,把这个小方法分享给大家,希望可以帮到一些刚入坑的友友。

解决思路

解决方法其实挺简单,就是更改页面布局,使用 absolute绝对定位取代flex定位。

代码演示

<html>
<body>
 <div class="wrap"> //包裹层
 <header></header> //顶部搜索条
 <div class="con"></div> //需要滚动的页面
 <footer></footer> //底部菜单栏
</div>
</body>
</html>
.wrap{
    position: relative;
    ...
}
header{
    position: absolute; 
    top: 0;
    ...
}
.con{
    overflow-y: auto; //设置是否使用滚动条为auto
    webkit-overflow-scrolling: touch; //理论上可以调用原生页面滚动,提高滚动流畅度
    ...
}
footer{
    position: absolute; //绝对定位
    bottom: 0;
}

这样就可以很轻松的解决Flex失效的问题。

查看更多文章请点击进入我的个人博客

话不多说,贴代码:

博文 来自: PrisonersDilemma
没有更多推荐了,返回首页