CODEWITHSUNDEEP
htmlgoogle-chromebrowserautocomplete
user10771503
user10771503

Reputation:

Disable Password List suggestion pick in chrome

In html code i have try to use this:

<input type="password" name="password" autocomplete="new-password">
<input type="password" name="password" autocomplete="new">
<input type="password" name="password" autocomplete="off">
<input type="password" name="password" autocomplete="nope">

Update test diferent name tag:

<input type="password" name="p1" autocomplete="nope">
<input type="password" name="p2" autocomplete="nope">
<input type="password" name="ahgsfkhas" autocomplete="nope">

To prevent chrome to show suggestion picker List, but none of this work, this is the result:

enter image description here

some way to disable this through an HTML or JQuery / javascript tag, I don't have access to all Chrome installations on PCs, like to edit this feature

this is not an offer to save password; this is a select picker from password stored (Password Manager). this breaks into the Interface of a Web Page, and I see no way to deactivate it from the web page, since I don't have access to the browser settings.

Upvotes: 2

Views: 5445

Answers (3)

karthi kn
karthi kn

Reputation: 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Login</title>
    <style>
        .custom-password-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .custom-password {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            cursor: text;
        }
        .hidden-password {
            position: absolute;
            left: -9999px;
            height: 0;
            width: 0;
            overflow: hidden;
        }
        .placeholder {
            color: #ccc;
            position: absolute;
            pointer-events: none;
            padding: 10px;
        }
    </style>
</head>
<body>
    <form id="login-form" autocomplete="off">
        <label for="username">Username:</label>
        <input type="text" id="username" autocomplete="off" required>

        <label for="custom-password">Password:</label>
        <div class="custom-password-container">
            <div id="custom-password" class="custom-password" contenteditable="true" aria-label="Password"></div>
            <input type="password" id="real-password" class="hidden-password" name="password" minlength="8" maxlength="30" required>
            <div id="password-placeholder" class="placeholder">Enter Password</div>
        </div>
        
        <button type="submit">Login</button>
    </form>

    <script>
        let actualPassword = '';

        function syncPassword() {
            const customPasswordDiv = document.getElementById('custom-password');
            const realPasswordInput = document.getElementById('real-password');
            const placeholder = document.getElementById('password-placeholder');

            if (customPasswordDiv.innerText.trim() === '') {
                placeholder.style.display = 'block';
            } else {
                placeholder.style.display = 'none';
            }

            realPasswordInput.value = actualPassword;
        }

        document.getElementById('custom-password').addEventListener('input', function(event) {
            const customPasswordDiv = document.getElementById('custom-password');
            const text = customPasswordDiv.innerText;
            const lastChar = text.charAt(text.length - 1);

            if (event.inputType === 'deleteContentBackward') {
                actualPassword = actualPassword.slice(0, -1);
            } else if (text.length > actualPassword.length) {
                actualPassword += lastChar;
            }

            customPasswordDiv.innerText = '*'.repeat(actualPassword.length);
            setCaretPosition(customPasswordDiv, customPasswordDiv.innerText.length);

            syncPassword();
        });

        function setCaretPosition(element, position) {
            const range = document.createRange();
            const sel = window.getSelection();
            range.setStart(element.childNodes[0], position);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }

        function customSubmit(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('real-password').value;

            console.log('Username:', username);
            console.log('Password:', password);

            // Add your custom form submission logic here, e.g., sending data to the server
        }

        document.getElementById('custom-password').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // Prevents new line creation
                customSubmit(event);
            }
        });

        // Initialize placeholder visibility
        syncPassword();
    </script>
</body>
</html>

Upvotes: 0

Hassan Khademi
Hassan Khademi

Reputation: 1390

I had the same problem it seems difficult to solve I found a solution To solve the problem the input in initialization must be equal to type="text" and then change to type="password" with the first focus or insert input

function changeTypeInput(inputElement){ 
  inputElement.type="password" 
}
<input type="text"
  id="anyUniqueId"  
  onfocus="changeTypeInput(this)"
  oninput="changeTypeInput(this)"
/>

Upvotes: 5

Crine
Crine

Reputation: 113

it's relative to the browser settings => automatic entry => password => Offer to save passwords (no)

Upvotes: -2

Related Questions