Unity WebGL中文输入插件支持输入法跟随支持全屏

最新推荐文章于 2025-04-16 10:14:36 发布

YZL_Default

最新推荐文章于 2025-04-16 10:14:36 发布

阅读量6.5k

点赞数 8

分类专栏： Unity WebGL 文章标签： unity webgl js unity3d

本文链接：https://blog.youkuaiyun.com/Rowley123456/article/details/103726927

版权

本文介绍了为解决Unity WebGL在中文输入、拷贝和输入法跟随等问题，作者自研了一个名为ChineseInputWebGL1.1的插件。该插件支持中英文输入、光标中间插入、输入法跟随、Ctrl快捷键操作以及WebGL全屏。通过在WebGL页面动态创建Html Input控件来实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于Unity WebGL本身不能很好的支持中文输入，拷贝，输入法跟随，然后网上找的插件，大多不令人满意，于是决定自己开发一个~

//2020年2月26日修改：
由于之前1.0版本的插件在Unity2019.2.4版本中打包，没有在低版本测试，导致有些使用低版本（2019以下的）的朋友无法使用，会出现missing的问题，Unity的高低版本在UI和WebGL也存在点差异，现在我重新打包一个1.1版本的插件，感谢大家的评论~

自研插件名称：ChineseInputWebGL1.1.unitypackage 插件下载

支持功能：
1.中英文输入
2.支持光标移动中间插入输入
3.输入法跟随
4.支持Ctrl+C（拷贝），Ctrl+V（粘贴），Ctrl+X（裁剪）等键盘操作
5.支持WebGL全屏

主要思路：在unity WebGL打包浏览页面的对应位置，动态创建一个Html的Input控件，去实现功能

主要效果图
中文输入，输入法跟随：
在这里插入图片描述
拷贝：

主要代码
js部分：

var ChineseInputWebGL = {
   
	$input:null,
	$canvas:null,
	$unityContainer:null,
	$webglcontent:null,
	$unityGameObjectName : "",
	$unityInputID: "",
	$Inputing: function()
	{
   
		if(unityGameObjectName!=null&&unityInputID!=null && input != null)
		{
   
			var strvalue = unityInputID+"|"+input.value+"|"+input.selectionStart;
			SendMessage(unityGameObjectName, "OnInputText", strvalue);
		}
	},
	$InputEnd: function()
	{
   
		if(unityGameObjectName!=null&&unityInputID!=null && input != null)
		{
   
			SendMessage(unityGameObjectName,"OnInputEnd",unityInputID.toString());
		}
		document.onkeydown=null;
	},
	InputShow: function(GameObjectName_,inputID_,v_,fontsizeT_,indexStr_,inputRectStr_)
	{
   				
		var GameObjectName = Pointer_stringify(GameObjectName_);
		var inputID = Pointer_stringify(inputID_);
		var v = Pointer_stringify(v_);
		var fontsizeT = Pointer_stringify(fontsizeT_);
		var indexStr=Pointer_stringify(indexStr_);
		var inputRectStr = Pointer_stringify(inputRectStr_);

		var indexArr=indexStr.split("|");
		var startIndexT = indexArr[0];
		var endIndexT = indexArr[1];
		
		var inputRectArr=inputRectStr.split("|");
		var posX = inputRectArr[0];
		var posY = inputRectArr[1];
		var width = inputRectArr[2];
		var height = inputRectArr[3];

		if(input==null){
   
			input = document.createElement("input")