Skip to content

Commit be70382

Browse files
slootsjjslootsjj
committed
Implement 'focus' method for wt.PasswordField
1 parent 4d3db9a commit be70382

File tree

1 file changed

+93
-21
lines changed

1 file changed

+93
-21
lines changed

‎widgets/+wt/PasswordField.m‎

Lines changed: 93 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -50,28 +50,12 @@ function setup(obj)
5050
obj.Position(3:4) = [100 25];
5151

5252
% Define the HTML source
53-
html = ['<input type="password" id="pass" name="password" style="width:100%;height:100%" >',...
54-
'<script type="text/javascript">',...
55-
'function setup(htmlComponent) {',...
56-
' htmlComponent.addEventListener("DataChanged", function(event) {',... %On uihtml Data prop changed
57-
' if (document.getElementById("pass").value !== htmlComponent.Data) {',... %Does JS value not match uihtml Data?
58-
' document.getElementById("pass").value = htmlComponent.Data;',... %Update the JS value to uihtml Data
59-
' }',...
60-
' });',...
61-
' document.getElementById("pass").addEventListener("input", function() {',...%On input to html field
62-
' htmlComponent.Data = document.getElementById("pass").value;',... %Copy JS value to uihtml data
63-
' });',...
64-
' document.addEventListener("keyup", function(event) {',... %Listen to key press
65-
' if (event.keyCode === 13) {',... %If ENTER key
66-
' htmlComponent.Data = document.getElementById("pass").value + ''\n'';',... %Add CR to data to trigger callback
67-
' }',...
68-
' });',...
69-
'}',...
70-
'</script>'];
53+
html = HTMLComponentForPasswordField();
7154

7255
% Create a html password input
7356
obj.PasswordControl = uihtml(...
7457
'Parent',obj.Grid,...
58+
'Data', struct('Value', "", 'DoFocus', false), ...
7559
'HTMLSource',html,...
7660
'DataChangedFcn',@(h,e)obj.onPasswordChanged(e) );
7761

@@ -84,7 +68,7 @@ function setup(obj)
8468
function update(obj)
8569

8670
% Update the edit control text
87-
obj.PasswordControl.Data = obj.Value;
71+
obj.PasswordControl.Data.Value = obj.Value;
8872

8973
end %function
9074

@@ -99,9 +83,9 @@ function onPasswordChanged(obj,evt)
9983
% Triggered on interaction
10084

10185
% Grab the data in string format
102-
newValue = string(evt.Data);
86+
newValue = string(evt.Data.Value);
10387
oldValue = obj.Value;
104-
previousData = evt.PreviousData;
88+
previousData = evt.PreviousData.Value;
10589

10690
% Look at the states
10791
if endsWith(newValue, newline)
@@ -147,5 +131,93 @@ function onPasswordChanged(obj,evt)
147131

148132
end %methods
149133

134+
%% Public methods
135+
methods
136+
137+
function focus(obj)
138+
139+
% Gets keyboard focus to the UI component and brings parent figure to front
140+
focus(obj.PasswordControl)
141+
142+
% Setting 'DoFocus' to TRUE will trigger DataChanged event in HTML
143+
% component, selecting the Input Field.
144+
% The HTML component reverts 'DoFocus' back to FALSE.
145+
obj.PasswordControl.Data.DoFocus = true;
146+
147+
end %function
148+
149+
end %methods
150+
150151
end % classdef
151152

153+
function T = HTMLComponentForPasswordField()
154+
% Return HTML component for password field in text
155+
156+
t = {
157+
'<input type="password" id="value" style="width:100%;height:100%"> '
158+
'<script type="text/javascript"> '
159+
' '
160+
' function setup(htmlComponent) { '
161+
' '
162+
' // Code response to data changes in MATLAB '
163+
' htmlComponent.addEventListener("DataChanged", dataFromMATLABToHTML); '
164+
' '
165+
' // Update the Data property of the htmlComponent object '
166+
' // This action also updates the Data property of the MATLAB HTML object'
167+
' // and triggers the DataChangedFcn callback function '
168+
' let dataInput = document.getElementById("value") '
169+
' dataInput.addEventListener("change", dataFromHTMLToMATLAB); '
170+
' '
171+
' // Trigger a DataChangedFcn callback when enter is pressed. '
172+
' document.addEventListener("keyup", onKeyPressed); '
173+
' '
174+
' function dataFromMATLABToHTML(event) { '
175+
' let changedData = htmlComponent.Data; '
176+
' console.log("New data from MATLAB:", changedData); '
177+
' '
178+
' // Update your HTML or JavaScript with the new data '
179+
' let domValue = document.getElementById("value"); '
180+
' domValue.value = changedData.Value; '
181+
' '
182+
' // Focus on the input element '
183+
' if (changedData.DoFocus){ '
184+
' '
185+
' // Focus on input field '
186+
' domValue.focus(); '
187+
' domValue.select(); '
188+
' '
189+
' // Revert value for focus event '
190+
' changedData.DoFocus = false; '
191+
' htmlComponent.Data = changedData; '
192+
' } '
193+
' } '
194+
' '
195+
' function dataFromHTMLToMATLAB(event) { '
196+
' let newValue = event.target.value; '
197+
' let newData = htmlComponent.Data; '
198+
' '
199+
' newData.Value = newValue; '
200+
' '
201+
' htmlComponent.Data = newData; '
202+
' } '
203+
' '
204+
' function onKeyPressed(event) { '
205+
' '
206+
' // Get data to change '
207+
' let newData = htmlComponent.Data; '
208+
' let domValue = document.getElementById("value"); '
209+
' '
210+
' // ENTER key? '
211+
' if (event.keyCode === 13) { '
212+
' newData.Value = domValue.value + "\n"; '
213+
' htmlComponent.Data = newData; '
214+
' } '
215+
' } '
216+
' } '
217+
'</script> '
218+
};
219+
220+
% Join cellstr to text scalar
221+
t = convertCharsToStrings(t);
222+
T = join(t, newline);
223+
end

0 commit comments

Comments
 (0)