Mask Password with asterisk in edit field used in app designer

63 次查看(过去 30 天)
Hello all, I have created a basic gui in app designer for user login.It has username selection as dropdown and password as edit field.
I want to mask the password with asterisk '*' while the user is typing the password with the edit field in focus. There are lot of resources on how to achieve this functionality in GUIDE but none in app designer.
Since edit field in app designer doesn't have 'keypress' Callback and also has no property 'String' (which are there in GUIDE) .I am finding it difficult how to replicate the same functionality in app designer.
I am using R2019a.Kindly help.
  6 个评论
Bavitha  Battipati
Bavitha Battipati 2021-4-22
编辑:Bavitha Battipati 2021-4-22
I'm facing the same issue. the password is not replaced by asterks. I'm using R2020b. Could you please help?

请先登录,再进行评论。

回答(4 个)

Sean de Wolski
Sean de Wolski 2020-6-2
编辑:Sean de Wolski 2021-4-23
I would recommend using uihtml and the html password edit box.
Attached is a functional example (can be better formatted and whatnot)
  1 个评论
Sampath Rachumallu
Wow this is cool. But uihtml is supported from R2019b i guess. I am currently using R2019a :(. So it won't be useful for me.But thanks for the information though!

请先登录,再进行评论。


Ruger28
Ruger28 2020-6-2
编辑:Ruger28 2020-6-2
I have created a sample app that just has one EditField (text)
  1. setup a public property, called PasswordVal
  2. add the UIFigureWindowKeyPress callback
  3. that function should follow below
  4. your password will be stored in PasswordVal, and can be used later anywhere in your app.
function UIFigureWindowKeyPress(app, event)
key = event.Key;
% Define letters, numbers, and special chars for your password. This is to
% stop the function from working when anything other than the defined chars
% above are entered.
letters = {'A','B','C','D','E','F','G','H','I','J','K',...
'L','M','N','O','P','Q','R','S','T','U','V',...
'W','X','Y','Z'};
Nums = {'1','2','3','4','5','6','7','8','9','0'};
SpecChars = {'!','@','#','$','%','^','&'};
% check to see if keypress is valid
if any(contains(letters,key,'IgnoreCase',true)) || any(contains(Nums,key,'IgnoreCase',true)) || any(contains(SpecChars,key,'IgnoreCase',true))
% key is valid, append to current password
app.PasswordVal = [app.PasswordVal,key];
% convert chars into *
app.EditField.Value = repmat('*',[1 length(app.PasswordVal)]);
else % invalid key, replce keypress with length of true password
app.EditField.Value = repmat('*',[1 length(app.PasswordVal)]);
end
end
Hope this helps.
  1 个评论
Sampath Rachumallu
编辑:Sampath Rachumallu 2020-6-26
Well this method will fail when the edit field is in focus. The UIFigureWindowKeyPress won't get executed when the edit field is in focus.

请先登录,再进行评论。


Matt Stead
Matt Stead 2021-11-23
编辑:Matt Stead 2021-11-26
function password_entry(src, evt)
% password stored in src.UserData.password
% src == 'edit' textbox whose 'KeyPressFcn' == @password_entry
% src 'Callback' is disabled during entry, and called when enter/return hit
% there may be a better way to do this, but it works nicely
if (isempty(src.UserData)) % store password & callback in UserData
set(src, 'Interruptible', 'off'); % do not allow other key presses until this is done
src.UserData = struct("password", '', "callback", src.Callback);
src.Callback = [];
end
c = get(gcf, 'CurrentCharacter'); % char(evt.Key) will not get shifted characters
if (isempty(c)) % modifier key
return;
end
len = length(src.UserData.password);
if (c < 33 || c > 126) % non-printable characters
switch (c)
case {8, 127} % backspace, delete
len = len - 1;
src.UserData.password = src.UserData.password(1:len);
ast_str = repmat('*', [1 len]);
src.String = ast_str; % first time display
drawnow; % 'edit' builtin display replaces previous string
src.String = ast_str; % second display
return;
case {9, 10, 13, 27} % tab, newline, carriage return, escape
src.Callback = src.UserData.callback; % src callback will be called on return
set(src, 'Interruptible', 'on'); % reset default - not sure if this is necessary
return;
otherwise
return;
end
end
src.UserData.password(len + 1) = c;
ast_str = [repmat('*', [1 len]) c];
src.String = ast_str; % first time display (asterisks with last character)
drawnow; % 'edit' builtin display replaces previous string
src.String = ast_str; % second display
pause(0.2); % show asterisks with last character for a brief time
ast_str(end) = '*'; % replace with all asterisks
src.String = ast_str;
end
  6 个评论
Matt Stead
Matt Stead 2022-4-20
Hi Jignesh,
Here's a complete program that works on my machine.
Call as: pw = test_pw_box();
Hope this helps. You'll have to figure out how to use it with App Designer yourself though.
function [password] = test_pw_box()
DEFAULT_PASSWORD = 'test_password';
MAX_PASSWORD_LENGTH = 16;
SYS_FONT_SIZE = 12;
% Figure
fig = figure('Units','pixels', ...
'Position', [200 100 350 160], ...
'HandleVisibility','on', ...
'IntegerHandle','off', ...
'Renderer','painters', ...
'Toolbar','none', ...
'Menubar','none', ...
'NumberTitle','off', ...
'Name','Test Password Box', ...
'Resize', 'on', ...
'CloseRequestFcn', @figureCloseCallback);
% Axes
ax = axes('parent', fig, ...
'Units', 'pixels', ...
'Position', [10 10 330 140], ...
'Xlim', [1 330], 'Ylim', [1 140], ...
'Visible', 'off');
% Password Label
passwordLabel = text('Position', [100 100], ...
'String', 'Password:', ...
'Color', 'k', ...
'FontSize', SYS_FONT_SIZE, ...
'HorizontalAlignment', 'right', ...
'FontWeight', 'bold', ...
'FontName', 'FixedWidth');
% Password Textbox
passwordTextbox = uicontrol(fig, ...
'Style', 'edit', ...
'Position', [120 100 150 30], ...s
'BackgroundColor', 'white', ...
'FontSize', SYS_FONT_SIZE, ...
'FontName', 'FixedWidth', ...
'HorizontalAlignment', 'left', ...
'KeyPressFcn', @password_entry, ...
'Callback', @passwordTextboxCallback);
% Finished Pushbutton
finishedPushbutton = uicontrol(fig, ...
'Style', 'pushbutton', ...
'String', 'Finished', ...
'Position', [120 50 100 30], ...
'FontSize', SYS_FONT_SIZE, ...
'FontName', 'FixedWidth', ...
'HorizontalAlignment', 'left', ...
'Callback', @finishedPushbuttonCallback);
% Set focus to textbox
uicontrol(passwordTextbox);
% Password Textbox Callback
function passwordTextboxCallback(~, ~)
if (length(passwordTextbox.String) > MAX_PASSWORD_LENGTH)
errordlg('Password is too long', 'Error');
passwordTextbox.String = '';
passwordTextbox.UserData.password = '';
else
uicontrol(finishedPushbutton);
end
end % passwordTextboxCallback()
% Finished Pushbutton Callback
function finishedPushbuttonCallback(~, ~)
figureCloseCallback();
end % finishedPushbuttonCallback()
% Figure Close Callback
function figureCloseCallback(~, ~)
password = passwordTextbox.UserData.password;
delete(fig);
return;
end % figureCloseCallback()
uiwait;
end
function password_entry(src, ~)
% password stored in src.UserData.password
% src == 'edit' textbox whose 'KeyPressFcn' == @password_entry
% src 'Callback' is disabled during entry, and called when enter/return hit
% there may be a better way to do this, but it works nicely
if (isempty(src.UserData)) % store password & callback in UserData
set(src, 'Interruptible', 'off'); % do not allow other key presses until this is done
src.UserData = struct("password", '', "callback", src.Callback);
src.Callback = [];
end
c = get(gcf, 'CurrentCharacter'); % char(evt.Key) will not get shifted characters
if (isempty(c)) % modifier key
return;
end
len = length(src.UserData.password);
if (c < 33 || c > 126) % non-printable characters
switch (c)
case {8, 127} % backspace, delete
len = len - 1;
src.UserData.password = src.UserData.password(1:len);
ast_str = repmat('*', [1 len]);
src.String = ast_str; % first time display
drawnow; % 'edit' builtin display replaces previous string
src.String = ast_str; % second display
return;
case {9, 10, 13, 27} % tab, newline, carriage return, escape
src.Callback = src.UserData.callback; % src callback will be called on return
set(src, 'Interruptible', 'on'); % reset default - not sure if this is necessary
return;
otherwise
return;
end
end
src.UserData.password(len + 1) = c;
ast_str = [repmat('*', [1 len]) c];
src.String = ast_str; % first time display (asterisks with last character)
drawnow; % 'edit' builtin display replaces previous string
src.String = ast_str; % second display
pause(0.3); % show asterisks with last character for a brief time
ast_str(end) = '*'; % replace with all asterisks
src.String = ast_str;
end

请先登录,再进行评论。


Raph
Raph 2023-1-20
Matt Stead has a really good answer. For App designer, I had to do some modifications.
% add to your edit field the Value changing function
app.PasswordEditField.ValueChangingFcn= @app.password_entry;
% add a function in your appdesigner file.
function password_entry(app,src, evt)
% password stored in src.UserData.password
% src == 'edit' textbox whose 'KeyPressFcn' == @password_entry
% src 'Callback' is disabled during entry, and called when enter/return hit
% there may be a better way to do this, but it works nicely
if (isempty(src.UserData)) % store password & callback in UserData
set(src, 'Interruptible', 'off'); % do not allow other key presses until this is done
src.UserData = struct("password", '', "callback", src.ValueChangedFcn);
src.ValueChangedFcn = [];
end
c = get(app.UIFigure, 'CurrentCharacter'); % char(evt.Key) will not get shifted characters
if (isempty(c)) % modifier key
return;
end
len = length(src.UserData.password);
if (c < 33 || c > 126) % non-printable characters
switch (c)
case {8, 127} % backspace, delete
len = len - 1;
src.UserData.password = src.UserData.password(1:len);
ast_str = repmat('*', [1 len]);
src.Value= ast_str; % first time display
drawnow; % 'edit' builtin display replaces previous string
src.Value= ast_str; % second display
return;
case {9, 10, 13, 27} % tab, newline, carriage return, escape
src.ValueChangedFcn = src.UserData.callback; % src callback will be called on return
set(src, 'Interruptible', 'on'); % reset default - not sure if this is necessary
return;
otherwise
return;
end
end
src.UserData.password(len + 1) = c;
ast_str = [repmat('*', [1 len]) c];
src.Value = ast_str; % first time display (asterisks with last character)
drawnow; % 'edit' builtin display replaces previous string
src.Value = ast_str; % second display
pause(0.2); % show asterisks with last character for a brief time
ast_str(end) = '*'; % replace with all asterisks
src.Value = ast_str;
end
end

类别

Help CenterFile Exchange 中查找有关 Specifying Target for Graphics Output 的更多信息

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by