Mask Characters of Lightning-input-field while typing - in LWC

Question

I am using lightning-record-edit-form to design a form layout for creating records. In that form, for one of the field, I want to mask the characters while typing. But looks like there is no such 'type' attribute where I can specify the type='password' for this field. Is there any way where I can mask all the characters while typing and send the original unmasked value to the server for the record insertion?

Answer 1

In base component value is masked after save as mentioned in the documentation

To mask the value while typing you can add CSS property -webkit-text-security: disc to mask input.

sample.html

<template>
    <lightning-card title="Account Edit">
        <lightning-record-edit-form object-api-name="Account">
            <lightning-messages>
            </lightning-messages>
            <lightning-input-field field-name="Name">
            </lightning-input-field>
            <lightning-input-field field-name="test_password__c" class="masked">
            </lightning-input-field>

            <lightning-button class="slds-m-top_small" type="submit" label="Create new">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

sample.js

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import maskedCss from '@salesforce/resourceUrl/masked';


export default class MyComponent extends LightningElement {

    connectedCallback() {
        loadStyle(this, maskedCss);
    }
}

masked.css

.masked  .slds-input {
    -webkit-text-security: disc;
}

I have added CSS inside a static resource because the child components style can not be overridden from outside in lwc because of shadow root.