eye icon in inputveld

Door hendrik jorna op 03-10-2024 21:56

1.629 views

Hallo,
Ik ben bezig met een script en ik wil het oogicoon in het invoerveld hebben, maar het verschijnt ernaast. Heeft iemand een idee hoe ik dit kan oplossen?

[code]
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PIN-Code Eingabe</title>
<style>
body {
font-family: "Inter", system-ui, -apple-system;
background-color: #ffffff;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
}
.login-container {
max-width: 400px;
width: 100%;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
position: relative; /* Voor de positie van het oogicoon */
}
.form-control {
width: 100%;
max-width: 220px; /* Aangepaste breedte */
height: 30px; /* Verminderde hoogte */
padding: 5px 40px 5px 10px; /* Padding voor het oogicoon */
font-size: 18px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: left; /* Tekst links uitlijnen */
margin: 0 auto; /* Centeren */
}
.eye-icon {
position: absolute;
right: 10px; /* Ruimte van de rechterkant */
top: 50%;
transform: translateY(-50%); /* Verticaal centreren */
cursor: pointer;
font-size: 18px; /* Grootte van de emoji */
pointer-events: auto; /* Klikbaar maken */
}
.mobile-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
.btn-number {
height: 45px;
width: 90px;
font-size: 20px;
background-color: #2870ED;
color: white;
border: none;
border-radius: 25px;
transition: background-color 0.3s;
}
.btn-number:hover {
background-color: #1E5BB5;
}
.btn-primary {
height: 45px;
font-size: 20px;
background-color: #2870ED;
color: white;
border: none;
border-radius: 25px;
margin-top: 15px;
transition: background-color 0.3s;
width: 90%;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.btn-primary:hover {
background-color: #1E5BB5;
}
</style>
</head>
<body>

<div class="login-container">
<h2 class="login-title">Geben Sie Ihren 4-stelligen PIN ein</h2>
<div class="form-group">
<input type="password" class="form-control" id="pinInput" maxlength="4" required="">
<span class="eye-icon" onclick="togglePinVisibility()">

- Ariën -

03-10-2024 22:16

Je vergeet wat divjes en spans af te sluiten.

h hendrik jorna

03-10-2024 22:24 gewijzigd op 03-10-2024 22:25

dit is het volledige script


<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PIN-Code Eingabe</title>
    <style>
        body {
            font-family: "Inter", system-ui, -apple-system;
            background-color: #ffffff;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            padding: 20px;
        }
        .login-container {
            max-width: 400px;
            width: 100%;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 15px;
            position: relative; /* Voor de positie van het oogicoon */
        }
        .form-control {
            width: 100%;
            max-width: 220px; /* Aangepaste breedte */
            height: 30px; /* Verminderde hoogte */
            padding: 5px 40px 5px 10px; /* Padding voor het oogicoon */
            font-size: 18px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: left; /* Tekst links uitlijnen */
            margin: 0 auto; /* Centeren */
        }
        .eye-icon {
            position: absolute;
            right: 10px; /* Ruimte van de rechterkant */
            top: 50%;
            transform: translateY(-50%); /* Verticaal centreren */
            cursor: pointer;
            font-size: 18px; /* Grootte van de emoji */
            pointer-events: auto; /* Klikbaar maken */
        }
        .mobile-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
        .btn-number {
            height: 45px;
            width: 90px;
            font-size: 20px;
            background-color: #2870ED;
            color: white;
            border: none;
            border-radius: 25px;
            transition: background-color 0.3s;
        }
        .btn-number:hover {
            background-color: #1E5BB5;
        }
        .btn-primary {
            height: 45px;
            font-size: 20px;
            background-color: #2870ED;
            color: white;
            border: none;
            border-radius: 25px;
            margin-top: 15px;
            transition: background-color 0.3s;
            width: 90%;
            max-width: 280px;
            margin-left: auto;
            margin-right: auto;
        }
        .btn-primary:hover {
            background-color: #1E5BB5;
        }
    </style>
</head>
<body>

<div class="login-container">
    <h2 class="login-title">Geben Sie Ihren 4-stelligen PIN ein</h2>
    <div class="form-group">
        <input type="password" class="form-control" id="pinInput" maxlength="4" required="">
        <span class="eye-icon" onclick="togglePinVisibility()">?????</span> <!-- Emoji als oogicoon -->
    </div>
    <div class="mobile-buttons">
        <button type="button" class="btn-number" onclick="appendNumber(1)">1</button>
        <button type="button" class="btn-number" onclick="appendNumber(2)">2</button>
        <button type="button" class="btn-number" onclick="appendNumber(3)">3</button>
        <button type="button" class="btn-number" onclick="appendNumber(4)">4</button>
        <button type="button" class="btn-number" onclick="appendNumber(5)">5</button>
        <button type="button" class="btn-number" onclick="appendNumber(6)">6</button>
        <button type="button" class="btn-number" onclick="appendNumber(7)">7</button>
        <button type="button" class="btn-number" onclick="appendNumber(8)">8</button>
        <button type="button" class="btn-number" onclick="appendNumber(9)">9</button>
        <button type="button" class="btn-number" onclick="clearPin()">C</button>
        <button type="button" class="btn-number" onclick="appendNumber(0)">0</button>
        <button type="button" class="btn-number" onclick="backspace()">?</button>
    </div>
    <button type="submit" class="btn-primary">Weiter</button>
</div>

<script>
    function togglePinVisibility() {
        const pinInput = document.getElementById('pinInput');
        pinInput.type = pinInput.type === 'password' ? 'text' : 'password';
    }

    function appendNumber(num) {
        const pinInput = document.getElementById('pinInput');
        if (pinInput.value.length < 4) {
            pinInput.value += num;
        }
    }

    function clearPin() {
        document.getElementById('pinInput').value = '';
    }

    function backspace() {
        const pinInput = document.getElementById('pinInput');
        pinInput.value = pinInput.value.slice(0, -1);
    }
</script>

</body>
</html>

Reageren

Inloggen om te reageren