Webgl development input box [InputField component] input Chinese
illustrate
Recently, I have been engaged in projects on the WEBGL platform, and it took several days to solve InputFieldthe problem of component input in Chinese. Record it here to avoid falling into the pit again! ! !
Solution 1 is compatible by rewriting the native InputField component
This method is solved by finding a way to rewrite the InputField component on the Internet.
It is also very simple to use. After importing the package, just replace the original InputField component with the following picture. The code is roughly calling the JS method in unity.
This rewriting has two input effects in WEBGL.
The second effect
is that this solution can solve most of the input requirements, but it is not very beautiful. Another problem is that the font used in the project is, and the test has Some fonts are not displayed 【处理字体目的为了减少服务器上的包体大小】. So I still want to implement the input part completely on JS without going through the components in Unity.
Solution 2 Define JS by yourself after packaging
Let’s start with the effect first. Here I am transferring the score from Unity to JS. If you are unclear, please read this [ Portal ]. The idea here is [the user’s grades are passed to JS for display after the scene is over, and the function of inputting names is implemented on JS, instead of using Unity components to display, just click OK and perform the follow-up operations you need] JS code according
to If you need to change it yourself, you can call the corresponding encapsulated method as needed.
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<length; i+=1) {
fragment.appendChild(nodes[i].cloneNode(true));
}
// 插入到容器的前面 - 差异所在
el.insertBefore(fragment, el.firstChild);
// 内存回收？
nodes = null;
fragment = null;
},
ahref:function(href,inputVal){
if(!href){
document.body.removeChild(document.getElementById("pop_tip"));
}else if(parseInt(href) < 0){
window.history.go(-1);
}else if(parseInt(href) == 1){
window.location.href = document.referrer;
}else if(href){
if(inputVal){
if(href.indexOf("?") != -1){
window.location.href=href+'&pop_val='+inputVal;
}else{
window.location.href=href+'?pop_val='+inputVal;
}
}else{
window.location.href=href;
}
}
},
html:function(score,text,btn1,btn2,inputflag){
let pop_tip_html = '<style>';
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();
};
}
}
}
Summarize
Summarize the pits encountered in the project:
- When testing the browser, try to close the plug-in as much as possible. When the CSDN plug-in is turned on during the test, there is an exception in the input of the InputField component (it was delayed for a long time, and I didn't think about it).
- When declaring JS by yourself, you must turn off the WEBGL keyboard event monitoring before calling.
WebGLInput.captureAllKeyboardInput = false;This may also cause the input of the JS input box to be abnormal (this also delays some time). - Setting exceptions before packaging does not interrupt the program
