Webgl开发输入框兼容问题及开发注意的问题
其他
更新时间：发布时间：
百科书网
趣学号
Webgl开发输入框【InputField组件】输入中文
- 说明
- 解决方案一通过重写原生的InputField组件来兼容
- 解决方案二通过打包后自己定义JS
- 总结
说明
最近一直再搞WEBGL平台的项目，花了好几天解决InputField组件输入中文的问题。在这记录一下避免再次入坑！！！
解决方案一通过重写原生的InputField组件来兼容
这个方法是在 网上找到重写InputField组件的方法来解决。
使用也很简单，将包导入后，将原生的InputField组件替换成下图就可以了，看代码大致也是在unity中调用JS方法。
这个重写的在WEBGL有两种输入效果，
效果二
这种解决办法是能解决大部分的输入需求，但是不是很美观，还有一个问题就是项目用到的字体是，测试在输入的时候有部分字体是不显示的【处理字体目的为了减少服务器上的包体大小】。所以还是想将输入的部分完全在JS上实现出来，不经过Unity中的组件。
解决方案二通过打包后自己定义JS
先上效果，这里我是将分数从Unity中传到了JS，如果有不清楚的请看这篇【传送门】。这里的想法是【用户的成绩在场景结束后传到JS显示，输入姓名的功能在JS上实现，不再用Unity的组件显示，点击确定后执行自己需要的后续操作即可】
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+=''+text+'
';
if(inputflag){
pop_tip_html += '';
}
if(btn1 && btn2){
pop_tip_html += 'id="pop_tip_btn1">'+btn1+'id="pop_tip_btn2">'+btn2+'
';
}else if(btn1){
pop_tip_html += 'id="pop_tip_btn">'+btn1+'
';
}
pop_tip_html += ' ';
return pop_tip_html;
},
htmPT:function(tips,btn1,btn2){
let pop_tip_htmlPT = '';
pop_tip_htmlPT += '
';
pop_tip_htmlPT += '
';
pop_tip_htmlPT+='
'+tips+'
';
if(btn1 && btn2){
pop_tip_htmlPT += '
id="pop_tip_btn1">'+btn1+'id="pop_tip_btn2">'+btn2+'
';
}else if(btn1){
pop_tip_htmlPT += '
id="pop_tip_btn">'+btn1+'
';
}
pop_tip_htmlPT += '
';
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();
};
}
}
}
总结
总结一下项目中遇到的坑：
- 在浏览器测试的时候，尽量还是将插件关闭，测试中开启CSDN插件在InputField组件输入有异常（在这还耽误了小半天，没往这方面想）。
- 在自己声明JS时，在调用之前一定一定一定要将WEBGL的键盘事件监听给关掉，WebGLInput.captureAllKeyboardInput = false;这个也可能导致JS输入框输入不正常（也在这耽误了一些时间）。
- 在打包之前设置异常不中断程序
