I'm trying to develop a simple input pin password that launches the numeric keyboard and has an eye icon to show and hide the password.


Empty input 


Input with mask on 


Input with mask off


 I tried different approaches: 

1- Using the input type="number" on the input -> it launches the numeric keyboard but it erases the first digit if it is a zero.

2- Using the input type="text" using the pattern attribute with a regex -> it launches the numeric keyboard only in iOS but not in Android

3- Using the input type="tel" and adding/removing a css class (with -webkit-text-security: disc;) when clicking on the eye to show/hide the pin -> it worked in both Android and iOS, but now it isn't working in iOS. This solution works on Chrome (desktop) and mobile versions of Safari and Chrome (developed outside Outsystems context - https://jsfiddle.net/7b613wgy). 


On solution #3 I tried to add the class via Javascript (manipulation DOM directly) at first but I changed to use Outsystems click events.


Can someone help me to figure out a solution that works in both iOS and Android? 


Hello Lucia, how are you?

Is there any reason why you can not use the Pin Code component from the forge? (Even if you can't use it it could be good studying material on how to solve your issue :))

https://www.outsystems.com/forge/component-overview/1989/pin-code

Do you know if there is any available JavaScript/jQuery UI library that does what you need?


Jay Santos wrote:

Hello Lucia, how are you?

Is there any reason why you can not use the Pin Code component from the forge? (Even if you can't use it it could be good studying material on how to solve your issue :))

https://www.outsystems.com/forge/component-overview/1989/pin-code

Hi Jay, 

Thank you for your answer. 


The component that I need (and is designed) is not really a pin code but more a numeric password with show/hide option. 


Anyway, I shared the component you sent with the dev and design team to analyse whether it can be used.


Best regards. :) 


G. Andrew Duthie wrote:

Do you know if there is any available JavaScript/jQuery UI library that does what you need?


Hi G. Andrew. 

Thanks for your answer. :)

We already tested outside of Outsystems context using just vanilla JS, and it works in both desktop and mobile browsers. 


Best regards.


luciamrodriguez wrote:

I'm trying to develop a simple input pin password that launches the numeric keyboard and has an eye icon to show and hide the password.


Empty input 


Input with mask on 


Input with mask off


 I tried different approaches: 

1- Using the input type="number" on the input -> it launches the numeric keyboard but it erases the first digit if it is a zero.

2- Using the input type="text" using the pattern attribute with a regex -> it launches the numeric keyboard only in iOS but not in Android

3- Using the input type="tel" and adding/removing a css class (with -webkit-text-security: disc;) when clicking on the eye to show/hide the pin -> it worked in both Android and iOS, but now it isn't working in iOS. This solution works on Chrome (desktop) and mobile versions of Safari and Chrome (developed outside Outsystems context - https://jsfiddle.net/7b613wgy). 


On solution #3 I tried to add the class via Javascript (manipulation DOM directly) at first but I changed to use Outsystems click events.


Can someone help me to figure out a solution that works in both iOS and Android? 



Hi ,

Try to use it on your control: input type = number and 

style = "-webkit-text-security:disc"

Regards,

Mohammad Hasib wrote:

luciamrodriguez wrote:

I'm trying to develop a simple input pin password that launches the numeric keyboard and has an eye icon to show and hide the password.


Empty input 


Input with mask on 


Input with mask off


 I tried different approaches: 

1- Using the input type="number" on the input -> it launches the numeric keyboard but it erases the first digit if it is a zero.

2- Using the input type="text" using the pattern attribute with a regex -> it launches the numeric keyboard only in iOS but not in Android

3- Using the input type="tel" and adding/removing a css class (with -webkit-text-security: disc;) when clicking on the eye to show/hide the pin -> it worked in both Android and iOS, but now it isn't working in iOS. This solution works on Chrome (desktop) and mobile versions of Safari and Chrome (developed outside Outsystems context - https://jsfiddle.net/7b613wgy). 


On solution #3 I tried to add the class via Javascript (manipulation DOM directly) at first but I changed to use Outsystems click events.


Can someone help me to figure out a solution that works in both iOS and Android? 



Hi ,

Try to use it on your control: input type = number and 

style = "-webkit-text-security:disc"

Regards,


Hi Mohammad Hasib,

Thanks for your answer but that was what I used in solution #3 and it doesn't work on iOS.  :)



Best regards,

luciamrodriguez wrote:

Mohammad Hasib wrote:

luciamrodriguez wrote:

I'm trying to develop a simple input pin password that launches the numeric keyboard and has an eye icon to show and hide the password.


Empty input 


Input with mask on 


Input with mask off


 I tried different approaches: 

1- Using the input type="number" on the input -> it launches the numeric keyboard but it erases the first digit if it is a zero.

2- Using the input type="text" using the pattern attribute with a regex -> it launches the numeric keyboard only in iOS but not in Android

3- Using the input type="tel" and adding/removing a css class (with -webkit-text-security: disc;) when clicking on the eye to show/hide the pin -> it worked in both Android and iOS, but now it isn't working in iOS. This solution works on Chrome (desktop) and mobile versions of Safari and Chrome (developed outside Outsystems context - https://jsfiddle.net/7b613wgy). 


On solution #3 I tried to add the class via Javascript (manipulation DOM directly) at first but I changed to use Outsystems click events.


Can someone help me to figure out a solution that works in both iOS and Android? 



Hi ,

Try to use it on your control: input type = number and 

style = "-webkit-text-security:disc"

Regards,


Hi Mohammad Hasib,

Thanks for your answer but that was what I used in solution #3 and it doesn't work on iOS.  :)



Best regards,

Ok i dint test in ios . i will check in ios and will get back to you.


Mohammad Hasib wrote:

luciamrodriguez wrote:

Mohammad Hasib wrote:

luciamrodriguez wrote:

I'm trying to develop a simple input pin password that launches the numeric keyboard and has an eye icon to show and hide the password.


Empty input 


Input with mask on 


Input with mask off


 I tried different approaches: 

1- Using the input type="number" on the input -> it launches the numeric keyboard but it erases the first digit if it is a zero.

2- Using the input type="text" using the pattern attribute with a regex -> it launches the numeric keyboard only in iOS but not in Android

3- Using the input type="tel" and adding/removing a css class (with -webkit-text-security: disc;) when clicking on the eye to show/hide the pin -> it worked in both Android and iOS, but now it isn't working in iOS. This solution works on Chrome (desktop) and mobile versions of Safari and Chrome (developed outside Outsystems context - https://jsfiddle.net/7b613wgy). 


On solution #3 I tried to add the class via Javascript (manipulation DOM directly) at first but I changed to use Outsystems click events.


Can someone help me to figure out a solution that works in both iOS and Android? 



Hi ,

Try to use it on your control: input type = number and 

style = "-webkit-text-security:disc"

Regards,


Hi Mohammad Hasib,

Thanks for your answer but that was what I used in solution #3 and it doesn't work on iOS.  :)



Best regards,

Ok i dint test in ios . i will check in ios and will get back to you.


I just  tested in outsystems now in ios it is working fine me. 


regards,

Mohammad Hasib wrote:

Mohammad Hasib wrote:

luciamrodriguez wrote:

Mohammad Hasib wrote:

luciamrodriguez wrote:

I'm trying to develop a simple input pin password that launches the numeric keyboard and has an eye icon to show and hide the password.


Empty input 


Input with mask on 


Input with mask off


 I tried different approaches: 

1- Using the input type="number" on the input -> it launches the numeric keyboard but it erases the first digit if it is a zero.

2- Using the input type="text" using the pattern attribute with a regex -> it launches the numeric keyboard only in iOS but not in Android

3- Using the input type="tel" and adding/removing a css class (with -webkit-text-security: disc;) when clicking on the eye to show/hide the pin -> it worked in both Android and iOS, but now it isn't working in iOS. This solution works on Chrome (desktop) and mobile versions of Safari and Chrome (developed outside Outsystems context - https://jsfiddle.net/7b613wgy). 


On solution #3 I tried to add the class via Javascript (manipulation DOM directly) at first but I changed to use Outsystems click events.


Can someone help me to figure out a solution that works in both iOS and Android? 



Hi ,

Try to use it on your control: input type = number and 

style = "-webkit-text-security:disc"

Regards,


Hi Mohammad Hasib,

Thanks for your answer but that was what I used in solution #3 and it doesn't work on iOS.  :)



Best regards,

Ok i dint test in ios . i will check in ios and will get back to you.


I just  tested in outsystems now in ios it is working fine me. 


regards,

Hey,

When you click on the icon to show the password, can you see all inserted numbers? Our problem is that with iOS only the last number is shown. 


Dear luciamrodriguez,

On click on show password please remove the style only. You dont need to do anything.

$('.hasib').removeAttr('style');

.hasib is the CSS classname for password input control. You can do it through the ID also of your password input control.

I hopes it will help you. It is working in IOS. 

Regards,

Mohammad Hasib wrote:


Dear luciamrodriguez,

On click on show password please remove the style only. You dont need to do anything.

$('.hasib').removeAttr('style');

.hasib is the CSS classname for password input control. You can do it through the ID also of your password input control.

I hopes it will help you. It is working in IOS. 

Regards,

Dear Mohammad Hasib, 

Thank you for the answer. That is exactly what I have. I already tried adding a class (which is what I have right now) and, as I said in the last post, ONLY THE LAST number in the input appears and hides. This solution was working til 2 weeks ago in BOTH Android and iOS but now it is not working in iOS. 

Our iOS version is 12.0


Regards


Hi luciamrodriguez,

I know this solution may not suggestable in terms of Outsystems concern, but for workaround you can keep this handy. its purely javascript.

Hope this helps.. 

(function () {

  'use strict';

  var useragent = navigator.userAgent;

  function deviceOS() {
    if(useragent.match(/Android 4.1.2/i)) {
        return 'android_412';
    } else if(useragent.match(/Android/i)) {
      return 'android';
    } else if(useragent.match(/iPhone/i)) {
      return 'iphone';
    } else if(useragent.match(/iPod/i)) {
      return 'ipod';
    } else if(useragent.match(/iPad/i)) {
      return 'ipad';
    } else if(useragent.match(/Windows Phone/i)) {
      return 'windows phone';
    } else {
      return 'no-device';
    }
  }

  function setPasswordInputToNumericKeyboard() {
    var passwordInput = document.getElementById('passwordInput');// here keep id of your input field
    var os = deviceOS();
    if(os === 'iphone' || os === 'ipod' || os === 'ipad' || os === 'android_412' || os === 'android') {
          passwordInput.type = 'tel';
    }
  }

  setTimeout(function(){ setPasswordInputToNumericKeyboard(); }, 1000);
  
})();

luciamrodriguez wrote:

Mohammad Hasib wrote:


Dear luciamrodriguez,

On click on show password please remove the style only. You dont need to do anything.

$('.hasib').removeAttr('style');

.hasib is the CSS classname for password input control. You can do it through the ID also of your password input control.

I hopes it will help you. It is working in IOS. 

Regards,

Dear Mohammad Hasib, 

Thank you for the answer. That is exactly what I have. I already tried adding a class (which is what I have right now) and, as I said in the last post, ONLY THE LAST number in the input appears and hides. This solution was working til 2 weeks ago in BOTH Android and iOS but now it is not working in iOS. 

Our iOS version is 12.0


Regards


Dear luciamrodriguez,

I tested in ios but with outsystems now. But i will test in ios then will get back to you.

Regards,


Mohammad Hasib wrote:

luciamrodriguez wrote:

Mohammad Hasib wrote:


Dear luciamrodriguez,

On click on show password please remove the style only. You dont need to do anything.

$('.hasib').removeAttr('style');

.hasib is the CSS classname for password input control. You can do it through the ID also of your password input control.

I hopes it will help you. It is working in IOS. 

Regards,

Dear Mohammad Hasib, 

Thank you for the answer. That is exactly what I have. I already tried adding a class (which is what I have right now) and, as I said in the last post, ONLY THE LAST number in the input appears and hides. This solution was working til 2 weeks ago in BOTH Android and iOS but now it is not working in iOS. 

Our iOS version is 12.0


Regards


Dear luciamrodriguez,

I tested in ios but with outsystems now. But i will test in ios then will get back to you.

Regards,


Dear luciamrodriguez,

I tried it in ios 12.1.4,

It is working fine. Attached is the sample oml file.

Regards,


Dear Mohammad Hasib 

I tested your oml and it doesnt work. We have the same problem. When you type more than one number, wait for last one to hide and then try to show the password. That's why this solution doesn't work for us. Only the last digit is shown.



Thanks anyway for your time and help. :)