Skip to content

Added right click to fields and improved usage for password managers #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
StefanStrategis wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added right click to fields and improved usage for password managers #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e2409d
- added helper method to check if an instance is active/focused
dinkelstefan Dec 5, 2025
f3acf57
added autocomplete html tag
dinkelstefan Dec 5, 2025
3e3126e
- HTML inputfield positions are now always synchronized to input fiel…
dinkelstefan Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 93 additions & 28 deletions Assets/WebGLSupport/WebGLInput/WebGLInput.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,22 @@ internal class WebGLInputPlugin
[DllImport("__Internal")]
public static extern void WebGLInputInit();
[DllImport("__Internal")]
public static extern int WebGLInputCreate(string canvasId, int x, int y, int width, int height, int fontsize, string text, string placeholder, bool isMultiLine, bool isPassword, bool isHidden, bool isMobile);
public static extern int WebGLInputCreate(string canvasId, int x, int y, int width, int height, int fontsize, string text, string placeholder, bool isMultiLine, bool isPassword, bool isHidden, bool isMobile, string autoComplete);
[DllImport("__Internal")]
public static extern void WebGLInputUpdateRect(int id, string canvasId, int x, int y, int width, int height, int fontsize, bool isMultiLine, bool isMobile) ;

[DllImport("__Internal")]
public static extern void WebGLInputEnterSubmit(int id, bool flag);

[DllImport("__Internal")]
public static extern void WebGLInputTab(int id, Action<int, int> cb);

[DllImport("__Internal")]
public static extern void WebGLInputEnablePointerEvents(int id);

[DllImport("__Internal")]
public static extern void WebGLInputDisablePointerEvents(int id);

[DllImport("__Internal")]
public static extern void WebGLInputFocus(int id);

Expand Down Expand Up @@ -78,10 +86,13 @@ internal class WebGLInputPlugin
#endif
#else
public static void WebGLInputInit() { }
public static int WebGLInputCreate(string canvasId, int x, int y, int width, int height, int fontsize, string text, string placeholder, bool isMultiLine, bool isPassword, bool isHidden, bool isMobile) { return 0; }
public static int WebGLInputCreate(string canvasId, int x, int y, int width, int height, int fontsize, string text, string placeholder, bool isMultiLine, bool isPassword, bool isHidden, bool isMobile, string autoComplete) { return 0; }
public static void WebGLInputUpdateRect(int id, string canvasId, int x, int y, int width, int height, int fontsize, bool isMultiLine, bool isMobile) { }
public static void WebGLInputEnterSubmit(int id, bool flag) { }
public static void WebGLInputTab(int id, Action<int, int> cb) { }
public static void WebGLInputFocus(int id) { }
public static void WebGLInputEnablePointerEvents(int id) { }
public static void WebGLInputDisablePointerEvents(int id) { }
public static void WebGLInputOnFocus(int id, Action<int> cb) { }
public static void WebGLInputOnBlur(int id, Action<int> cb) { }
public static void WebGLInputOnValueChange(int id, Action<int, string> cb) { }
Expand Down Expand Up @@ -116,6 +127,16 @@ public class WebGLInput : MonoBehaviour, IDeselectHandler, IComparable<WebGLInpu
public bool enableTabText = false;
#endif

public static bool IsInstanceActive()
{
foreach (var inst in instances)
{
if (inst.Value.input != null && inst.Value.input.isFocused) return true;
}

return false;
}

static WebGLInput()
{
CanvasId = WebGLWindow.GetCanvasName();
Expand All @@ -129,6 +150,12 @@ static WebGLInput()
[TooltipAttribute("show input element on canvas. this will make you select text by drag.")]
public bool showHtmlElement = false;

[TooltipAttribute("This will spawn the text object as soon as its enabled. This helps for autofill of fields.")]
public bool keepElementActive = false;

[TooltipAttribute("This will add a \"autocomplete=\" tag to the HTML element. This helps for autofill of fields.")]
public string autoComplete = "";

private IInputField Setup()
{
if (GetComponent<InputField>()) return new WrappedInputField(GetComponent<InputField>());
Expand Down Expand Up @@ -164,33 +191,52 @@ private void Awake()
OnKeyboardDown += KeyboardDownHandler;
}

private void UpdateInputRect()
{
if (instances.ContainsKey(id))
{
var rect = GetElemetRect();
var fontSize = Mathf.Max(14, input.fontSize); // limit font size : 14 !!

WebGLInputPlugin.WebGLInputUpdateRect(id, WebGLInput.CanvasId, rect.x, rect.y, rect.width, rect.height, fontSize, input.lineType != LineType.SingleLine, Application.isMobilePlatform);
}
}

/// <summary>
/// Get the element rect of input
/// </summary>
/// <returns></returns>
RectInt GetElemetRect()
{
var rect = input.GetScreenCoordinates();
// モバイルの場合、強制表示する
if (showHtmlElement || Application.isMobilePlatform)
{
var x = (int)(rect.x);
var y = (int)(Screen.height - (rect.y + rect.height));
return new RectInt(x, y, (int)rect.width, (int)rect.height);
}
else
{
var x = (int)(rect.x);
var y = (int)(Screen.height - (rect.y));
return new RectInt(x, y, (int)rect.width, (int)1);
}
//// モバイルの場合、強制表示する
var x = (int)(rect.x);
var y = (int)(Screen.height - (rect.y + rect.height));
return new RectInt(x, y, (int)rect.width, (int)rect.height);
}

/// <summary>
/// 対象が選択されたとき
/// </summary>
/// <param name="eventData"></param>
public void OnSelect()
{
SpawnHTMLElement();


WebGLInputPlugin.WebGLInputFocus(id);
if (input.OnFocusSelectAll)
{
WebGLInputPlugin.WebGLInputSetSelectionRange(id, 0, input.text.Length);
}
else
{
WebGLInputPlugin.WebGLInputSetSelectionRange(id, input.caretPosition, input.caretPosition);
}

}

public void SpawnHTMLElement() {
if (id != -1) throw new Exception("OnSelect : id != -1");

var rect = GetElemetRect();
Expand All @@ -200,7 +246,7 @@ public void OnSelect()

// モバイルの場合、強制表示する
var isHidden = !(showHtmlElement || Application.isMobilePlatform);
id = WebGLInputPlugin.WebGLInputCreate(WebGLInput.CanvasId, rect.x, rect.y, rect.width, rect.height, fontSize, input.text, input.placeholder, input.lineType != LineType.SingleLine, isPassword, isHidden, Application.isMobilePlatform);
id = WebGLInputPlugin.WebGLInputCreate(WebGLInput.CanvasId, rect.x, rect.y, rect.width, rect.height, fontSize, input.text, input.placeholder, input.lineType != LineType.SingleLine, isPassword, isHidden, false, autoComplete);

@kou-yeung kou-yeung Dec 7, 2025

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

miss for pass isMobile flag ?
changed Application.isMobilePlatform to false.


instances[id] = this;
WebGLInputPlugin.WebGLInputEnterSubmit(id, input.lineType != LineType.MultiLineNewline);
Expand All @@ -213,19 +259,9 @@ public void OnSelect()

// default value : https://www.w3schools.com/tags/att_input_maxlength.asp
WebGLInputPlugin.WebGLInputMaxLength(id, (input.characterLimit > 0) ? input.characterLimit : 524288);
WebGLInputPlugin.WebGLInputFocus(id);
#if WEBGLINPUT_TAB
WebGLInputPlugin.WebGLInputEnableTabText(id, enableTabText);
#endif
if (input.OnFocusSelectAll)
{
WebGLInputPlugin.WebGLInputSetSelectionRange(id, 0, input.text.Length);
}
else
{
WebGLInputPlugin.WebGLInputSetSelectionRange(id, input.caretPosition, input.caretPosition);
}

WebGLWindow.OnBlurEvent += OnWindowBlur;
}

Expand Down Expand Up @@ -460,7 +496,26 @@ private void KeyboardDownHandler(WebGLInput instance, KeyboardEvent keyboardEven

void Update()
{
if (input == null || !input.isFocused)
if (instances.ContainsKey(id))
{
UpdateInputRect();


if (Input.GetMouseButtonDown(1))
{
WebGLInputPlugin.WebGLInputEnablePointerEvents(id);
}
if (!Input.GetMouseButton(1))
{
WebGLInputPlugin.WebGLInputDisablePointerEvents(id);
}
if (input.interactable == false)
{
DeactivateInputField();
}
}

if (input == null || !input.isFocused || !input.interactable)
{
CheckOutFocus();
return;
Expand Down Expand Up @@ -522,12 +577,22 @@ private void OnDestroy()
private void OnEnable()
{
WebGLInputTabFocus.Add(this);

if (keepElementActive && input.interactable == true && id == -1)
{
SpawnHTMLElement();
}
}

private void OnDisable()
{
WebGLInputTabFocus.Remove(this);
DeactivateInputField();
if (!keepElementActive)
{
DeactivateInputField();
}
}

public int CompareTo(WebGLInput other)
{
var a = input.GetScreenCoordinates();
Expand Down
57 changes: 41 additions & 16 deletions Assets/WebGLSupport/WebGLInput/WebGLInput.jslib
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ var WebGLInput = {
if(typeof Runtime === "undefined") Runtime = { dynCall : dynCall }
}
},
WebGLInputCreate: function (canvasId, x, y, width, height, fontsize, text, placeholder, isMultiLine, isPassword, isHidden, isMobile) {
WebGLInputCreate: function (canvasId, x, y, width, height, fontsize, text, placeholder, isMultiLine, isPassword, isHidden, isMobile, autoComplete) {

var container = document.getElementById(UTF8ToString(canvasId));
var canvas = container.getElementsByTagName('canvas')[0];
Expand Down Expand Up @@ -43,22 +43,13 @@ var WebGLInput = {

var input = document.createElement(isMultiLine?"textarea":"input");
input.style.position = "absolute";
input.autocomplete = UTF8ToString(autoComplete);

if(isMobile) {
input.style.bottom = 1 + "vh";
input.style.left = 5 + "vw";
input.style.width = 90 + "vw";
input.style.height = (isMultiLine? 18 : 10) + "vh";
input.style.fontSize = 5 + "vh";
input.style.borderWidth = 5 + "px";
input.style.borderColor = "#000000";
} else {
input.style.top = y + "px";
input.style.left = x + "px";
input.style.width = width + "px";
input.style.height = height + "px";
input.style.fontSize = fontsize + "px";
}
input.style.top = y + "px";
input.style.left = x + "px";
input.style.width = width + "px";
input.style.height = height + "px";
input.style.fontSize = fontsize + "px";

input.style.outlineWidth = 1 + 'px';
input.style.opacity = isHidden?0:1;
Expand Down Expand Up @@ -87,6 +78,32 @@ var WebGLInput = {
}
return instances.push(input) - 1;
},
WebGLInputUpdateRect: function (id, canvasId, x, y, width, height, fontsize, isMultiLine, isMobile){

@kou-yeung kou-yeung Dec 7, 2025

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fontsize, isMultiLine, and isMobile do not seem to be used here.
If this method is supposed to update only the rect, maybe we should remove these parameters
(or move font-size handling to another method).

var input = instances[id];

var container = document.getElementById(UTF8ToString(canvasId));
var canvas = container.getElementsByTagName('canvas')[0];

if(canvas)
{
var scaleX = container.offsetWidth / canvas.width;
var scaleY = container.offsetHeight / canvas.height;

if(scaleX && scaleY)
{
x *= scaleX;
width *= scaleX;
y *= scaleY;
height *= scaleY;
}
}

input.style.top = y + "px";
input.style.left = x + "px";
input.style.width = width + "px";
input.style.height = height + "px";
input.style.fontSize = fontsize + "px";
},
WebGLInputEnterSubmit: function(id, falg){
var input = instances[id];
// for enter key
Expand Down Expand Up @@ -121,6 +138,14 @@ var WebGLInput = {
}
});
},
WebGLInputEnablePointerEvents: function(id){
var input = instances[id];
input.style.pointerEvents = 'auto';
},
WebGLInputDisablePointerEvents: function(id){
var input = instances[id];
input.style.pointerEvents = 'none';
},
WebGLInputFocus: function(id){
var input = instances[id];
input.focus();
Expand Down
1 change: 1 addition & 0 deletions Assets/WebGLSupport/WebGLInput/Wrapper/IInputField.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ public interface IInputField
bool ReadOnly { get; }
bool OnFocusSelectAll { get; }
bool EnableMobileSupport { get; }
bool interactable { get; }

Rect GetScreenCoordinates();

Expand Down
8 changes: 8 additions & 0 deletions Assets/WebGLSupport/WebGLInput/Wrapper/WrappedInputField.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,14 @@ public bool EnableMobileSupport
}
}

public bool interactable
{
get
{
return input.interactable;
}
}

public WrappedInputField(InputField input)
{
this.input = input;
Expand Down
8 changes: 8 additions & 0 deletions Assets/WebGLSupport/WebGLInput/Wrapper/WrappedTMPInputField.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,14 @@ public bool EnableMobileSupport
}
}

public bool interactable
{
get
{
return input.interactable;
}
}

public WrappedTMPInputField(TMP_InputField input)
{
this.input = input;
Expand Down
8 changes: 8 additions & 0 deletions Assets/WebGLSupport/WebGLInput/Wrapper/WrappedUIToolkit.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,14 @@ public bool EnableMobileSupport
}
}

public bool interactable
{
get
{
return true;
}
}

public WrappedUIToolkit(WebGLUIToolkitTextField input)
{
this.input = input.TextField;
Expand Down