Mask Password with asterisk in edit field used in app designer

218 views (last 30 days)
Sampath Rachumallu
Sampath Rachumallu on 12 May 2020
Edited: Matt Stead on 26 Nov 2021 at 17:07
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 Comments

Sign in to comment.

Answers (3)

Sean de Wolski
Sean de Wolski on 2 Jun 2020
Edited: Sean de Wolski on 23 Apr 2021
I would recommend using uihtml and the html password edit box.
Attached is a functional example (can be better formatted and whatnot)
  1 Comment
Sampath Rachumallu
Sampath Rachumallu on 2 Jun 2020
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!

Sign in to comment.


Ruger28
Ruger28 on 2 Jun 2020
Edited: Ruger28 on 2 Jun 2020
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 Comment
Sampath Rachumallu
Sampath Rachumallu on 2 Jun 2020
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.

Sign in to comment.


Matt Stead
Matt Stead on 23 Nov 2021 at 19:52
Edited: Matt Stead on 26 Nov 2021 at 17:07
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

Community Treasure Hunt

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

Start Hunting!