Unity3D ZFBrowser (EmbeddedBrowser) 插件嵌入網頁沒法輸入中文問題

　　網頁嵌入插件最好的應該就是ZFBrowser了, 但是使用起來也是問題多多, 如今最要命的是網頁輸入不能打中文, 做者也沒打算接入IME, 只能本身想辦法了...html

　　搞了半天只想到一個辦法, 就是經過Unity的IME去觸發中文輸入, 而後傳入網頁, 也就是說作一個透明的 InputField 蓋住網頁的輸入文本框, 而後在 Update 或是 onValueChanged 中把內容傳給網頁, 這樣基本就能實現中文輸入了.前端

　　由於對前端不熟悉, 我就作了一個簡單網頁作測試:函數

<html>

<head>
    <title>My first page</title>
    <style> body { margin: 0;
        }
    </style>
</head>

<body>
    <h1>Test Input</h1> Field1: <input type="text" id="field1"> Field2: <input type="text" id="field2"> 
    <br>
    <br>
    <script>
        function SetInputValue(id, str) { document.getElementById(id).value = str; } function SubmitInput(str) { document.getElementById("field2").value = "Submited : " + str; } </script>

</body>

</html>

　　這裏網頁有兩個Text Area, 左邊做爲輸入, 右邊做爲回車後的調用測試:測試

　　而後Unity中直接用一個InputField放到 Field1 的位置上, 設置爲透明, 經過Browser類提供的CallFunction方式調用就能夠了:字體

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; namespace UIModules.UITools { public class BrowserInputField : MonoBehaviour { [SerializeField] public ZenFulcrum.EmbeddedBrowser.Browser browser; [SerializeField] public InputField input; [Space(10.0f)] [Header("設置網頁 input 函數名稱")] [SerializeField] public string SetInputFuncName = "SetInputFuncName"; [Header("設置網頁 submit 函數名稱")] [SerializeField] public string SubmitFuncName = "SubmitFuncName"; [Header("網頁 input id")] [SerializeField] public string InputElementID = "InputElementID"; public bool inited { get; private set; } private void Awake() { this.RequireComponent<CanvasGroup>().alpha = 0.01f; Init(); } public void Init() { if(input && (false == inited)) { inited = true; input.RequireComponent<IME_InputFollower>(); // IME 跟隨 StartCoroutine(CaretAccess((_caret) => { if(_caret) { var group = _caret.RequireComponent<CanvasGroup>(); group.alpha = 1f; group.ignoreParentGroups = true; } })); } } IEnumerator CaretAccess(System.Action<Transform> access) { if(input) { var caret = input.transform.Find("InputField Input Caret"); while(caret == false && input) { caret = input.transform.Find("InputField Input Caret"); yield return null; } access.Invoke(caret); } } void Update() { if(browser && input) { browser.CallFunction(SetInputFuncName, new ZenFulcrum.EmbeddedBrowser.JSONNode[2] { new ZenFulcrum.EmbeddedBrowser.JSONNode(InputElementID), new ZenFulcrum.EmbeddedBrowser.JSONNode(input.isFocused ? input.text : (string.IsNullOrEmpty(input.text)?input.placeholder.GetComponent<Text>().text: input.text)) }); } } } }

　　這裏InputField它會自動生成 Caret 就是輸入標記, 爲了讓他能顯示出來, 須要等待到它建立出來以後設置透明度便可. 這裏省掉了IME輸入法跟隨的代碼, 那是其它功能了.ui

　　恩, 由於字體大小不同, 因此Caret位置不許確, 反正是能輸入了.this