内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

完美解决input输入在苹果IOS系统下预输入导致的bug,兼容手机端IOS、Android系统

发布:2017-08-10 浏览: 评论(
正常情况下,我们监听input值变化所用的兼容性较好的方法是:
$("input").on("input propertychange",function(){
   //回调事件
})
上面的方法,在PC端可以完全兼容所有浏览器,
但是手机端中,IOS系统下键盘预输入的时候会有问题,安卓中是没有问题的;
以下的方法就是解决IOS下预输入问题的;
但在PC端中兼容性不好,所以最后的解决办法是,PC端中就用上面的方法,如果是手机端则用下面的方法;

//用法:        $(selecter).InputEventClearPre({
//				MaxLength:'',//输入框能输入的最大长度,默认不限制,填写则限制
//				callback:function($self,valLength,index){
//					//$self 代表绑定对象本身;
//					//valLength 是输入框的字符总长度/如果要限制输入数字等,不要用valLength,建议用$self.val().length;
					//index 是绑定对象的下标,对象集时多用
//				}
//			})
	$.fn.InputEventClearPre=function(options){
		var defaults={
				MaxLength:'',//输入框能输入的最大长度,默认不限制,填写则限制
				callback:function($self,valLength,index){
					//$self代表绑定对象本身;
					//valLength是输入框的字符总长度
					//index是绑定元素的下标,对象集的时候多用;
				}
		};
		var opts = $.extend({},defaults,options || {});
		var renderclass={
			render:"inputRender"
		};
		var cpLock=[];
		return this.each(function(i){
			cpLock[i] = false;
			var $self=$(this);
			
			$self.addClass(renderclass.render);
			$self.on('compositionstart', function(){
			    cpLock[i] = true;
			});
			$self.on('compositionend', function(){
			    cpLock[i] = false;
			    var self=$(this);
			    if(!cpLock[i]){
			     	if(opts.MaxLength){
			     		if(self.val().length>(opts.MaxLength-0)){
		                    self.val(self.val().substring(0,opts.MaxLength-0));
		                    if(typeof opts.callback=='function'){
		                    	opts.callback(self,self.val().length,i);
		                    }
		                }else{
		                	if(typeof opts.callback=='function'){
		                    	opts.callback(self,self.val().length,i);
		                   }
		                }
			     	}else{
			     		if(typeof opts.callback=='function'){
	                    	opts.callback(self,self.val().length,i);
	                    }
			     	}
			    }
			})
			$self.on('input', function(){
				var self=$(this);
			    if(!cpLock[i]){
			    	if(opts.MaxLength){
			     		if(self.val().length>(opts.MaxLength-0)){
		                    self.val(self.val().substring(0,opts.MaxLength-0));
		                    if(typeof opts.callback=='function'){
		                    	opts.callback(self,self.val().length,i);
		                    }
		                }else{
		                	if(typeof opts.callback=='function'){
		                    	opts.callback(self,self.val().length,i);
		                   }
		                }
			     	}else{
			     		if(typeof opts.callback=='function'){
	                    	opts.callback(self,self.val().length,i);
	                    }
			     	}
			    }
			});
			
		})
	}
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2019 seozhijia.net 版权所有-粤ICP备13087626号-4