解决unity发布webgl端Input Field不支持中文输入的问题

最新推荐文章于 2024-05-13 20:01:20 发布
最新推荐文章于 2024-05-13 20:01:20 发布
阅读量2.6k 收藏 5
点赞数 1
文章标签： unity c# 游戏引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34980278/article/details/105091646
版权

Unity项目发布webgl端时Input Field控件是无法支持中文的，那么解决这个问题的一个思路就是重写unity的inputField控件来调用html页面上的input表单控件，然后输入完成后将输入的值传给unity的inputfield控件。

主页面

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>资源多维精准展现</title>
<link rel="shortcut icon" href="TemplateData/favicon.png">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="TemplateData/jquery.min.js"></script>
<script src="Build/jquery-1.8.2.min.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
    $(function(){
        ChangeCanvas();
        $(window).resize(function(){
            document.getElementById('int').focus();
        });
        document.getElementById('int').focus();
    });
    var gameInstance = UnityLoader.instantiate("gameContainer", "Build/webshow.json",{onProgress: UnityProgress});
	function goBack() {
		window.history.go(-1)
    };
	function parseUrl() {
	    var searchHref = window.location.search.replace('?', '');
	    var str_before = searchHref.split("&")[0];
	    var params = searchHref.split('&');
	    var returnParam = {};
	    params.forEach(function (param) {
	        var paramSplit = param.split('=');
	        returnParam[paramSplit[0]] = paramSplit[1];
	    });
	    return returnParam;
    }
	window.params = parseUrl();
	var inputType='';
	function enter(){
	    hideMask();
	    var ip = "http://192.168.1.126:8088";
	    gameInstance.SendMessage("Canvas","MainEnter",params.CAMPSITE_ID+"_"+ip);
	}
    function ChangeCanvas() {
        hideWrap();
    }
	function showWrap(str,lx){
	    inputType=lx;
		$("#iframe_wrap").show();
		var win = $("#iframe").contents()[0];
		$("#iframe").contents().find("#int").val(str);
		win.getElementById('int').focus();
	}
	function hideWrap(){
		$("#iframe_wrap").hide();
		//$("#iframe").contents().find("#int").val("");
	}
	function sureWrap(){
	    var val = $("#iframe").contents().find("#int").val();
	    gameInstance.SendMessage("Main Camera","get"+inputType+"Value",val);
	    document.getElementById('int').focus();
        gameInstance.SendMessage("Main Camera",inputType,val);
        hideWrap();
	}
	
	function hideMask() {
	   $('.x-frame-mask').remove();
	}
	
	function size(left, top, _width, _height){
	    $('#gameContainer').height();
		$("#iframe_wrap").css({"left":left,"top":top,"width":_width,"height":_height});
		document.getElementById('int').focus();
	}
</script>
<style type="text/css">
    .webgl-content,#gameContainer,canvas{
        width: 100%; 
        height: 100vh;
    }
    .hidden{
       /* display: none; */
    }
	.x-frame-mask {
	    position: fixed;
	    float: left;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, .2);
	    z-index: 99999;
	}
	
	.frameloading {
	    position: fixed;
	    z-index: 9999;
	    left: 50%;
	    top: 50%;
	    margin-top: -140px;
	    margin-left: -140px;
	}
	
	.x-frame-mask .x-mask-msg-text {
	    padding: 125px 125px;
	    background-image: none;
	    background-color: transparent;
	    width: 250px;
	    height: 250px;
	}
	
	
	 @-moz-keyframes rotate{
	  100%{
	    -moz-transform:rotate(0deg);
	   }
	   100%{
	     -moz-transform:rotate(360deg);
	   }
	}
	 @-webkit-keyframes rotate{
	  100%{
	    -webkit-transform:rotate(0deg);
	   }
	   100%{
	     -webkit-transform:rotate(360deg);
	   }
	}
	 @keyframes rotate{
	  100%{
	    transform:rotate(0deg);
	   }
	   100%{
	     transform:rotate(360deg);
	   }
	}
	.x-frame-mask .m-17 {
	    width: 250px;
	    height: 250px;
	    filter: alpha(opacity =       50);
	    -moz-opacity: 0.50;
	    opacity: 0.50;
	    background: no-repeat url("TemplateData/2.png") left top;
	    background-size: 250px 250px;
	    margin: 0 auto;
	    -webkit-background-size: 250px 250px;
	    -moz-background-size: 250px 250px;
	    -webkit-border-radius: 175px;
	    border-radius: 175px;
	    -moz-transition: all  .6s;
	    -webkit-transition: all  .6s;
	    transition: all  .6s;
	    -moz-animation: rotate 0.6s infinite linear;
	    -webkit-animation: rotate 0.6s infinite linear;
	    animation: rotate 0.6s infinite linear;
	}
	
	.x-frame-mask .m-19 {
	    width: 250px;
	    height: 250px;
	    filter: alpha(opacity =       70);
	    -moz-opacity: 0.70;
	    opacity: 0.70;
	    background: no-repeat url("TemplateData/4.png") left top;
	    background-size: 250px 250px;
	    margin: 0 auto;
	    margin-top: -100%;
	    -webkit-background-size: 250px 250px;
	    -moz-background-size: 250px 250px;
	    -webkit-border-radius: 175px;
	    border-radius: 175px;
	    -moz-transition: all .2s;
	    -webkit-transition: all .2s;
	    transition: all .2s;
	    -moz-animation: rotate 2s infinite linear;
	    -webkit-animation: rotate 2s infinite linear;
	    animation: rotate 2s infinite linear;
	}
	
	.x-frame-mask .m-20 {
	    width: 250px;
	    height: 250px;
	    filter: alpha(opacity =       50);
	    -moz-opacity: 0.50;
	    opacity: 0.50;
	    background: no-repeat url("TemplateData/5.png") left top;
	    background-size: 250px 250px;
	    margin: 0 auto;
	    margin-top: -100%;
	    -webkit-background-size: 250px 250px;
	    -moz-background-size: 250px 250px;
	    -webkit-border-radius: 175px;
	    border-radius: 175px;
	    -moz-transition: all  .8s;
	    -webkit-transition: all  .8s;
	    transition: all  .8s;
	    -moz-animation: rotate 0.8s infinite linear;
	    -webkit-animation: rotate 0.8s infinite linear;
	    animation: rotate 0.8s infinite linear;
	}
	
	.x-frame-mask .m-21 {
	    width: 250px;
	    height: 250px;
	    filter: alpha(opacity =       50);
	    -moz-opacity: 0.50;
	    opacity: 0.50;
	    background: no-repeat url("TemplateData/6.png") left top;
	    background-size: 250px 250px;
	    margin: 0 auto;
	    margin-top: -100%;
	    -webkit-background-size: 250px 250px;
	    -moz-background-size: 250px 250px;
	    -webkit-border-radius: 175px;
	    border-radius: 175px;
	    -moz-transition: all  .3s;
	    -webkit-transition: all  .3s;
	    transition: all  .3s;
	    -moz-animation: rotate 0.3s infinite linear;
	    -webkit-animation: rotate 0.3s infinite linear;
	    animation: rotate 0.3s infinite linear;
	}
	
	.x-frame-mask .m-22 {
	    width: 250px;
	    height: 250px;
	    filter: alpha(opacity =       80);
	    -moz-opacity: 0.80;
	    opacity: 0.80;
	    background: no-repeat url("TemplateData/7.png") left top;
	    background-size: 250px 250px;
	    margin: 0 auto;
	    margin-top: -100%;
	    -webkit-background-size: 250px 250px;
	    -moz-background-size: 250px 250px;
	    -webkit-border-radius: 175px;
	    border-radius: 175px;
	    -moz-transition: all .25s;
	    -webkit-transition: all .25s;
	    transition: all .25s;
	    -moz-animation: rotate 25s infinite linear;
	    -webkit-animation: rotate 25s infinite linear;
	    animation: rotate 25s infinite linear;
	}
	
	.x-frame-mask .m-23 {
	    width: 250px;
	    height: 250px;
	    filter: alpha(opacity =       80);
	    -moz-opacity: 0.80;
	    opacity: 0.80;
	    background: no-repeat url("TemplateData/8.png") left top;
	    background-size: 250px 250px;
	    margin: 0 auto;
	    margin-top: -100%;
	    -webkit-background-size: 250px 250px;
	    -moz-background-size: 250px 250px;
	    -webkit-border-radius: 175px;
	    border-radius: 175px;
	    -moz-transition: all  .3s;
	    -webkit-transition: all  .3s;
	    transition: all  .3s;
	    -moz-animation: rotate 0.3s infinite linear;
	    -webkit-animation: rotate 0.3s infinite linear;
	    animation: rotate 0.3s infinite linear;
	}
	
	.x-frame-mask .xzleft {
	    -webkit-transform: rotateZ(720deg);
	    -moz-transform: rotateZ(720deg);
	    -o-transform: rotateZ(720deg);
	    -ms-transform: rotateZ(720deg);
	    transform: rotateZ(720deg);
	}
	
	.logo,.progress{
	   display: none;
	}
	.input-hidden{
		width: 0;
	    height: 0px;
	    position: fixed;
	    top: 0;
	    right: 0;
	}
</style>
</head>
<body onresize="ChangeCanvas()" style="margin: 0; background-color:#222C36;">
	<div class="webgl-content" style="z-index: -1;">
		<div id="gameContainer" style="width:100%; height: 100vh"></div>
		<div class="x-frame-mask">
	         <div class="frameloading">
	              <div class="m-17 "></div>
	              <div class="m-19 "></div>
	              <div class="m-20 xzleft"></div>
	              <div class="m-21 "></div>
	              <div class="m-22 "></div>
	              <div class="m-23 xzleft"></div>
	          </div>
	    </div>
	    <input class="input-hidden" type="text" id="int" value="asdasdasdasd">
	</div>
	<div id="iframe_wrap" style="width:200px;height:30px;position:absolute;left:10%;top:10%;overflow: hidden;display:none;">
		<iframe id="iframe" src="input.html" scrolling="none" frameborder="0" style="width:100%;height:100%;border:none;">
		</iframe>
		
	</div>
	
	<script>
        ChangeCanvas();
    </script>
</body>
</html>

输入框页面：

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
	<style type="text/css">
	   *{
            padding:0;
            margin:0;
        }
	   #int_wrap{
	   }
	   
	   .input-box{
	   
	   }
	   .input-box{
	        width: calc(100% - 2px);
		    height: 32px;
		    display: flex;
		    justify-content: center;
		    border: 1px solid #5d76a5;
	   }
	   .input-text{
	        width: calc(100% - 34px);
		    min-width: 0;
		    padding: 0 10px;
		    font-size: 14px;
		    background: #2b3649;
		    border: none;
		    color: #fff;
		    border-right: none;
		    height: 31px;
		    line-height: 31px;
		    outline: none;
	   }
	   .search-btn{
	        /*background-image: url(TemplateData/search.png);
		    background-position: 5px 6px;
		    background-repeat: no-repeat;
			*/
		    height: 32px;
		    width: 34px;
		    border: none;
		    background-color: #2b3649;
	   }
	   body{
	       overflow: hidden;
	   }
	</style>
</head>
<body >
	<div id="int_wrap">
		<div class="input-box" >
			<input class="input-text" type="text" id="int"><a onclick="top.sureWrap()" class="search-btn"></a>
		</div>
	</div>
	<script>
        document.onkeyup=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(e&&e.keyCode==13){
                top.sureWrap()
            }
        }
    </script>
</body>
</html>

当我们点击unity的inputfiled控件时调用主页面的showWrap方法，在当前控件的同位置显示html的input控件，然后在该控件中输入文字，确定后调用主页面的sureWrap方法将输入的值传给unity的inputfiled控件，并隐藏html页面的input控件

周金为15952582017
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity WebGL InputField 在手机上没有呼出输入框的问题解决，顺便制作webgl项目上传运行流程
qq_38306201的博客
12-14 1413
电脑上运行是没有问题的，但是到了手机上就出现了各种杂七杂八的问题，懂得都懂，首先提示 abort(both async and sync fetching of the wasm failed at error at jsstacktrace)，然后对应到下载进度发现.wasm后缀文件，只能到80%90%刚开始以为是网络问题，测试了下发现并不是。然后网上差了资料各种的测试，官网也没有个准确的解决办法，最后也是不停的尝试后解决的，最后把我最后能在手机上运行的设置给贴出来，没能成功运行的可以做个参考。
unity在webgl端 输入框无法输入中文和中文显示问题的解决
热门推荐
u013172864的博客
12-22 1万+
unity在发布成webgl无法显示中文和inputField无法输入中文的问题应该都遇到了，博主蛋疼的查了好久才发现unity内置的inputfield类不支持IME，顺着这个路不小心找到了插件 这个插件免费的，可以下来试试，但是这个插件里面的字体是真的坑，中文显示不全总会少字，那么这样就又开始蛋疼了，捣鼓了好久，决定换个中文ttf，一般电脑字体文件下有好多字体 随便找个支持中文的后缀是tt
解决Unity的Webgl中InputField无法输入中文字符的问题.zip
09-04
支持webgl中文输入
UnityWebGLInputField-master webgl中文输入
10-25
webgl中文输入
Unity2021.3.34 WebGl 按钮控制全屏以及中文输入
最新发布
A1761881681的博客
05-13 297
有这样的一种功能 可能用户不想要网页的全屏 想要Unity ui中按钮来控制 这样我们用Unity里的API控制全屏非全屏是不行的 这样没法中文输入 所以我们就用了调用js的一个方法。最后就实现Unity中UI Button可以全屏非全屏转换了，也可以支持中文输入 如有需要关注博主 免费领取最新版中文输入插件。第三:修改WebglTemplate Index文件。第一：在Plungin创建Dll文件。第二:代码绑定按钮点击。
Unity WebGL Input输入中文
fengxing132433的博客
02-13 1110
Unity WebGL Input输入中文
Unity WebGL版支持InputField中文输入
09-25
原生UGUI的InputField空间，在WebGL中的支持不太好： 1、发布后，Arial默认字体会丢失，所以必须外部引用字体。推荐C:\Windows\Fonts\黑体.ttf 2、发布后，在InputField输入框中，无法输入中文。 *本资源主要解决第2个问题
解决Unity的Webgl中InputField无法输入中文字符的问题
波波斯维奇
01-16 6682
解决Unity的Webgl中InputField无法输入中文字符的问题 前言 Unity的InputField组件在打出的webgl不能输入中文字符，因为现在做的项目都是使用使用Unity打出Webgl包，所以需要解决这个问题。解决方法很简单，只需要用一个插件即可完美解决，插件链接如下： 解决webgl输入框无法输入中文插件 使用方法 1.将插件添加到项目中，如下图所示： 2.将Input Ma...
Unity-WebGL打包后不能输入中文
weixin_38484443的博客
04-22 2148
Unity-WebGL打包后不能输入中文
Unity WebGL 输入框(InputField)接受中文输入
穿裤子的云
02-27 3277
Unity 发布成WebGL后，inputfield无法输入中文？怎么办......
解决unity打包webgl输入框不能输入中文Tool
06-02
1.解决unity打包webgl输入框不能输入中文的插件 2.简单好用, 3.找到里面的WebGlInput脚本,直接挂到InputField输入框上 4.里面有另外的中文字体包,需要把输入框上的字体替换一下 5.打包测试即可 6.亲测2021.3.4unity版本可以使用,其他版本都无差异 7.如果没有积分可以私信我,发我你的邮箱,我发给你
UNITY WebGL实现中文输入
01-30
模拟Unity InputField位置动态生成html input，实现中文输入
解决webgl输入框无法输入中文插件
09-08
两个插件 都差不多。都不能在全屏下 输入中文。
unity 输入中文
01-02
用于c#调用的中文输入法，unity中可用，可用于自己开发程序内的键盘输入
unity WEBGL 输入
09-19
unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个 unity 发布到WEBGL 不能输入文字？ 用这个
Unity WebGL网页端输入法支持中文全屏输入
07-17
"FullScreenWebGL"这个文件名可能包含的是实现全屏中文输入的相关代码、资源或者示例项目，开发者可以通过研究这些内容，了解Unity如何解决全屏中文输入问题，以及如何在自己的项目中应用这一改进。 总的来说，...
解决Unity发布WebGL无法正常浏览问题
07-27
解决Unity发布WebGL无法正常浏览问题，下载Config文件，放到发布的目录中
Unity、WebGl、全屏模式下输入中文
03-19
5. **社区资源和插件**：Unity Asset Store和开源社区可能有现成的解决方案或插件，专门处理WebGL平台上的中文输入问题，可以考虑使用这些资源。 总的来说，解决Unity WebGL全屏模式下输入中文的问题，需要理解...
unity input field在web端输入不了中文
09-02
Unity InputField 在 web 端输入中文的问题主要是由于默认情况下 Unity 的 InputField 组件在 WebGL 的运行环境下，无法通过键盘输入中文字符。 要解决这个问题，有以下几种办法： 1. 使用自定义的输入法插件：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值