-webkit-text-security compatibility

Question

I have set text-security:disc; in the following manner but it is not working in firefox.

text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;

I am setting these properties to input[type='number'] field. Any suggestion?

Answer 1

window.onload = function() {
    init(); 
}

function init() {
    var x = document.getElementsByTagName("input")[0];
    var style = window.getComputedStyle(x);
    console.log(style);

    if (style.webkitTextSecurity) {
        // Do nothing
    } else {
        x.setAttribute("type", "password");
    }
}

CSS

input {
    text-security: disc;
    -webkit-text-security: disc;
    -moz-text-security: disc;
}

Answer 2

It 2022 and Firefox still doesn't support text-security

The answers that change the input type to password have a few undesirable effects:

• Browser password suggestions and save password prompts
• Default input behaviour lost - e.g. when using type=number will show a pin pad on mobile.

There are a couple of new solutions to this problem:

1 - inputmode

<input type="password" inputmode="tel" />

This displays like a password but behaves like a tel. Seems to show mobile pin pad but still wants to save password in Firefox. Maybe this is what you want?

Inputmode has good browser coverage with the exception of IE and Safari for MacOS

https://caniuse.com/input-inputmode

2 - Custom font to mask text

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/noppa/text-security/master/dist/text-security.css">
<style>
    input.password-mask {
        font-family: "text-security-disc";
        -webkit-text-security: disc;
    }
</style>
<input type="tel" class="password-mask" />

This solution has the benefit of wider browser coverage Safari and IE11 however might be less secure as won't use the browser security features for type=password.

Git repo - https://github.com/noppa/text-security

Demo - https://noppa.github.io/text-security.html

Answer 3

Firefox, IE don't support -webkit-text-security property. for more details, you can visit on this link : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

Answer 4

I'm making a PWA using React. (And using Material-UI and Formik on the component in question, so syntax may seem a bit unusual...)

I'm not totally clear on the OP's goals... but it seems similar to my needs: I'm using "disc" and needing a "number" keyboard as well.

I wanted to stop Chrome from trying to save login credentials (because devices are shared with many users in my situation).

For the input (MUI TextField in my case), I set the type to "text" rather than "password" in order to get around Chromes detection for the store-credentials-feature. I made input-mode as "numeric" to get the keypad to pop up as the keyboard. And then, as Richa described, I used text-security: disc; and -webkit-text-security: disc;
Again, careful of my code's syntax, as it's using React, MUI, etc. (React uses capital letters and no dashes, etc.)

See the parts with the // comment; the rest is just bonus for context.

<TextField
            type="text" // this is a hack so Chrome does not offer saved credentials; should be "password" otherwise
            name="pincode"
            placeholder="pin"
            value={values[PIN_FIELD]}
            onChange={handleChange}
            onBlur={handleBlur}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <RemoveRedEye
                    color="action"
                    onClick={togglePasswordMask}
                  />
                </InputAdornment>
              ),
              inputProps: {
                inputMode: 'numeric', // for number keyboard
                style: {
                  textSecurity: `${passwordIsMasked ? 'disc' : ''} `, // part of hack described above. this disc mimics the password *** appearance
                  WebkitTextSecurity: `${passwordIsMasked ? 'disc' : ''} `, // same hack
                },
              },
            }}
          />

As you can see, I have a toggle that lets you hide or show the pin (by clicking the eye icon). A similar function could be added as appropriate / desired.

const [passwordIsMasked, setPasswordIsMasked] = useState(true)
const togglePasswordMask = () => {
setPasswordIsMasked((value) => !value)

}

Answer 5

-webkit-text-security works in Firefox since version 114 which was released in June 2023.