Webgl开发输入框兼容问题及开发注意的问题

Webgl开发输入框【InputField组件】输入中文

  • 说明
  • 解决方案一通过重写原生的InputField组件来兼容
  • 解决方案二通过打包后自己定义JS
  • 总结

说明

  最近一直再搞WEBGL平台的项目,花了好几天解决InputField组件输入中文的问题。在这记录一下避免再次入坑!!!

解决方案一通过重写原生的InputField组件来兼容

这个方法是在 网上找到重写InputField组件的方法来解决。
使用也很简单,将包导入后,将原生的InputField组件替换成下图就可以了,看代码大致也是在unity中调用JS方法。
Webgl开发输入框兼容问题及开发注意的问题_第1张图片
这个重写的在WEBGL有两种输入效果,
Webgl开发输入框兼容问题及开发注意的问题_第2张图片
效果二
Webgl开发输入框兼容问题及开发注意的问题_第3张图片
  这种解决办法是能解决大部分的输入需求,但是不是很美观,还有一个问题就是项目用到的字体是,测试在输入的时候有部分字体是不显示的【处理字体目的为了减少服务器上的包体大小】。所以还是想将输入的部分完全在JS上实现出来,不经过Unity中的组件。

解决方案二通过打包后自己定义JS

先上效果,这里我是将分数从Unity中传到了JS,如果有不清楚的请看这篇【传送门】。这里的想法是【用户的成绩在场景结束后传到JS显示,输入姓名的功能在JS上实现,不再用Unity的组件显示,点击确定后执行自己需要的后续操作即可】
Webgl开发输入框兼容问题及开发注意的问题_第4张图片
Webgl开发输入框兼容问题及开发注意的问题_第5张图片
JS代码 大家根据自己需求自己更改,根据需要调用对应封装好的方法就可以。


var poplayer = {
	prependHTML:function(el, html){
		var divTemp = document.createElement("div"),nodes = null,fragment = document.createDocumentFragment();
		divTemp.innerHTML = html;
		nodes = divTemp.childNodes;
		for (var i=0, length=nodes.length; i;
		pop_tip_html += '*{margin:0;padding:0;}';
		pop_tip_html += '.pop_tip{position: fixed;top: 0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.5);}';
		pop_tip_html += '.pop_tip .pop_tip_box{position: absolute;top: 34%;width: 300px;left: 50%;margin-left:-150px;background: #fff;z-index: 1000;text-align: center;border-radius: 10px;}';
		pop_tip_html += '.pop_tip .pop_tip_box .pop_tip_score{font-size: 16px;font-size: 16px;line-height: 25px;padding-top:20px;padding-left:20px;padding-right:20px;padding-bottom:2px;text-align: Center;}';
		pop_tip_html += '.pop_tip .pop_tip_box .pop_tip_text{font-size: 16px;font-size: 16px;line-height: 25px;padding: 20px;text-align: Center;}';
		
		pop_tip_html += '.pop_tip .pop_tip_box .popbtm .left{display:inline-block;width: 50%;text-align: center;line-height: 35px;font-size: 16px;background: #ccc;color: #fff;border-radius: 0 0 0 10px;}';
		pop_tip_html += '.pop_tip .pop_tip_box .popbtm .right{display:inline-block;width: 50%;text-align: center;line-height: 35px;font-size: 16px;background: #3dc6da;color: #fff;border-radius: 0 0 10px 0;}';
		pop_tip_html += '.pop_tip .pop_tip_btn_box{margin:10px 0 20px 0;color:#fff;font-size:14px;}';
		pop_tip_html += '.pop_tip .pop_tip_btn_box #pop_tip_btn{display:inline-block;width:200px;background:#70b4fd;text-align:center;line-height:30px;border-radius: 10px;cursor: pointer;}';
		pop_tip_html += '.pop_tip .pop_tip_btn_box #pop_tip_btn1,.pop_tip .pop_tip_btn_box #pop_tip_btn2{margin:0 2px;display:inline-block;width:calc(50% - 20px);background:#999;text-align:center;line-height:30px;border-radius:10px;cursor: pointer;}';
		pop_tip_html += '.pop_tip .pop_tip_btn_box #pop_tip_btn1{background:#70b4fd;}';
		pop_tip_html += '.pop_tip .pop_tip_box .pop_tip_input_box{text-align:center;margin-bottom: 20px;}';
		pop_tip_html += '.pop_tip .pop_tip_box .pop_tip_input_box input{width:(80% - 10px);height:30px;padding:0 10px;border:1px solid #ccc;}';
		pop_tip_html += 'style>';
		
		pop_tip_html += '<div class="pop_tip" id="pop_tip">';
		pop_tip_html += '<div class="pop_tip_box">';
		
		if(score)
		{
			pop_tip_html+='<div class="pop_tip_score">您的分数为:'+score+'div>';
		}
		
		pop_tip_html+='<div class="pop_tip_text">'+text+'div>';
		
		if(inputflag){
			pop_tip_html += '<div class="pop_tip_input_box" ><input type="text" id="pop_tip_input" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,\'\')" placeholder="'+inputflag+'">div>';
		}
		if(btn1 && btn2){
			pop_tip_html += '<div class="pop_tip_btn_box"><span id="pop_tip_btn1">'+btn1+'span><span id="pop_tip_btn2">'+btn2+'span>div>';
		}else if(btn1){
			pop_tip_html += '<div class="pop_tip_btn_box"><span id="pop_tip_btn">'+btn1+'span>div>';
		}
		pop_tip_html += 'div>div>';
		return pop_tip_html;
	},
	
	htmPT:function(tips,btn1,btn2){
		let pop_tip_htmlPT = '<style>';
		pop_tip_htmlPT += '*{margin:0;padding:0;}';
		pop_tip_htmlPT += '.pop_tip{position: fixed;top: 0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.5);}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_box{position: absolute;top: 34%;width: 300px;left: 50%;margin-left:-150px;background: #fff;z-index: 1000;text-align: center;border-radius: 10px;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_box .pop_tip_score{font-size: 16px;font-size: 16px;line-height: 25px;padding-top:20px;padding-left:20px;padding-right:20px;padding-bottom:2px;text-align: Center;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_box .pop_tip_text{font-size: 16px;font-size: 16px;line-height: 25px;padding: 20px;text-align: Center;}';
		
		pop_tip_htmlPT += '.pop_tip .pop_tip_box .popbtm .left{display:inline-block;width: 50%;text-align: center;line-height: 35px;font-size: 16px;background: #ccc;color: #fff;border-radius: 0 0 0 10px;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_box .popbtm .right{display:inline-block;width: 50%;text-align: center;line-height: 35px;font-size: 16px;background: #3dc6da;color: #fff;border-radius: 0 0 10px 0;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_btn_box{margin:10px 0 20px 0;color:#fff;font-size:14px;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_btn_box #pop_tip_btn{display:inline-block;width:200px;background:#70b4fd;text-align:center;line-height:30px;border-radius: 10px;cursor: pointer;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_btn_box #pop_tip_btn1,.pop_tip .pop_tip_btn_box #pop_tip_btn2{margin:0 2px;display:inline-block;width:calc(50% - 20px);background:#999;text-align:center;line-height:30px;border-radius:10px;cursor: pointer;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_btn_box #pop_tip_btn1{background:#70b4fd;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_box .pop_tip_input_box{text-align:center;margin-bottom: 20px;}';
		pop_tip_htmlPT += '.pop_tip .pop_tip_box .pop_tip_input_box input{width:(80% - 10px);height:30px;padding:0 10px;border:1px solid #ccc;}';
		pop_tip_htmlPT += 'style>';
		
		pop_tip_htmlPT += '<div class="pop_tip" id="pop_tip">';
		pop_tip_htmlPT += '<div class="pop_tip_box">';
		
		pop_tip_htmlPT+='<div class="pop_tip_text">'+tips+'div>';
		
		if(btn1 && btn2){
			pop_tip_htmlPT += '<div class="pop_tip_btn_box"><span id="pop_tip_btn1">'+btn1+'span><span id="pop_tip_btn2">'+btn2+'span>div>';
		}else if(btn1){
			pop_tip_htmlPT += '<div class="pop_tip_btn_box"><span id="pop_tip_btn">'+btn1+'span>div>';
		}
		pop_tip_htmlPT += 'div>div>';
		return pop_tip_htmlPT;
	},
	//提示框  
	//语法:poplayer.msg('提示文字','提示框几秒后消失','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接')
	msg:function(text,time,href){
		var _this = this;
		_this.prependHTML(document.body,_this.html('',text));
		time = time ? parseInt(time)*1000 : 3000;
		
		setTimeout(function(){
			_this.ahref(href);
		},time);
	},
	//警示框
	//语法:poplayer.alert('提示文字','按钮文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接') 
	alert:function(text,btn,href){
		var _this = this;
		btn = btn ? btn : '确定';
		_this.prependHTML(document.body,_this.html('',text,btn));
		document.getElementById("pop_tip_btn").onclick = function(){
			_this.ahref(href);
		};
	},
	//确认对话框
	//语法:poplayer.confirm('提示文字','按钮1文案','按钮2文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接')
	confirm:function(text,btn1,btn2,href){
		var _this = this;
		btn1 = btn1 ? btn1 : '确定';
		btn2 = btn2 ? btn2 : '取消';
		_this.prependHTML(document.body,_this.html('',text,btn1,btn2));

		document.getElementById("pop_tip_btn1").onclick = function(){
			_this.ahref(href);
		};
		document.getElementById("pop_tip_btn2").onclick = function(){
			document.body.removeChild(document.getElementById("pop_tip"));
		};
	},
	//输入框
	//语法:poplayer.prompt('提示文字','按钮1文案','按钮2文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接','输入框提示文字','是否必填true/false') 
	prompt:function(text,btn1,btn2,href,inputFlag,mustFlag){
		var _this = this;
		btn1 = btn1 ? btn1 : '确定';
		_this.prependHTML(document.body,_this.html('',text,btn1,btn2,inputFlag));
		let domBtn1= document.getElementById("pop_tip_btn");
		if(btn1 && btn2){
			domBtn1= document.getElementById("pop_tip_btn1");
		}
		domBtn1.onclick = function(){
			let inputVal = inputFlag ? document.getElementById("pop_tip_input").value : '';
			if(mustFlag && !inputVal){
				document.body.removeChild(document.getElementById("pop_tip"));
				_this.msg(inputFlag,3);
				setTimeout(function(){
					_this.prompt(text,btn1,btn2,href,inputFlag,mustFlag);
				},3000);
			}else{
				_this.ahref(href,inputVal);
			}
		};
		if(btn2){
			document.getElementById("pop_tip_btn2").onclick = function(){
				document.body.removeChild(document.getElementById("pop_tip"));
			};
		}
	},
	//输入框带回调 f1,f2
	prompt1:function(score,text,btn1,btn2,inputFlag,mustFlag,f1,f2){
		var _this = this;
		btn1 = btn1 ? btn1 : '确定';
		_this.prependHTML(document.body,_this.html(score,text,btn1,btn2,inputFlag));
		let domBtn1= document.getElementById("pop_tip_btn");
		if(btn1 && btn2){
			domBtn1= document.getElementById("pop_tip_btn1");
		}
		domBtn1.onclick = function(){
			let inputVal = inputFlag ? document.getElementById("pop_tip_input").value : '';
			if(mustFlag && !inputVal){
				document.body.removeChild(document.getElementById("pop_tip"));
				_this.msg('名字不能为空!',2);
				setTimeout(function(){
					//_this.prompt(text,btn1,btn2,href,inputFlag,mustFlag);
					poplayer.prompt1(score,'请输入你的姓名:',btn1,btn2,'待输入...',true,f1,f2)
				},2000);
			}else{
				f1(inputVal);
				//_this.ahref(href,inputVal);
			}
		};//重新开始按钮
		if(btn2){
			document.getElementById("pop_tip_btn2").onclick = function(){
				document.body.removeChild(document.getElementById("pop_tip"));
				f2();
			};
		}
	},
	prompt2:function(tips,btn1,btn2,f1,f2){
		var _this = this;
		btn1 = btn1 ? btn1 : '确定';
		_this.prependHTML(document.body,_this.htmPT(tips,btn1,btn2));
		
		let domBtn1= document.getElementById("pop_tip_btn");
		if(btn1 && btn2){
			domBtn1= document.getElementById("pop_tip_btn1");
		}
		domBtn1.onclick = function(){ //调查问卷
			f1();
		};//重新开始按钮
		if(btn2){
			document.getElementById("pop_tip_btn2").onclick = function(){
				document.body.removeChild(document.getElementById("pop_tip"));
				f2();
			};
		}
	}
}

总结

总结一下项目中遇到的坑:

  1. 在浏览器测试的时候,尽量还是将插件关闭,测试中开启CSDN插件在InputField组件输入有异常(在这还耽误了小半天,没往这方面想)。
  2. 在自己声明JS时,在调用之前一定一定一定要将WEBGL的键盘事件监听给关掉,WebGLInput.captureAllKeyboardInput = false;这个也可能导致JS输入框输入不正常(也在这耽误了一些时间)。
  3. 在打包之前设置异常不中断程序
    Webgl开发输入框兼容问题及开发注意的问题_第6张图片

你可能感兴趣的:(Unity问题记录,unity,javascript,游戏引擎,webgl)