HTML Input verdecken?

Hallo! Ich habe in HTML einen Input von Typ Text. Man sieht den Text, aber ich möchte, das man ihn angezeigt bekommt, als wäre es ein Passwort. Also mit *****.Ich kann aufgrund meines Javascript Codes ihn aber nicht als Typ Password(also <Input type="Password"> geht nicht) abspeichern. Kann ich den Text trotzdem irgendwie verdecken?

2 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

13.01.2021, 20:01

Geht, ist aber schwierig und für den Nutzer ggfs. irreführend: leg per CSS ein Element über das Eingabefeld und simuliere in diesem die Eingabe per JavaScript während der Nutzer im Hintergrund die eigentliche Eingabe im Feld vornimmt.

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

WebcodeYT

Beitragsersteller

13.01.2021, 20:02

Gute Idee danke...

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

13.01.2021, 20:03

Du kannst das Element mit einem anderen Element verdecken.

Beispiel (ein Eingabefeld überlagert das Eingabefeld für die Eingabe):

<div class="container">
  <input class="front">
  <input>
</div>

CSS:

.container {
  position: relative;
}

.front {
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}

Zusätzlich könntest du noch das beschreibbare Eingabefeld mit einem Listener für das input-Event ausstatten. Der Handler schreibt dann bei jedem Aufruf ein Zeichen in das Feld (mit Orientierung an der Länge des tatsächlichen Eingabefelds).

WebcodeYT

Beitragsersteller

13.01.2021, 20:58

Oh mein Gott danke!Vor allem das du das ganze auch noch gecodet hast!

regex9

13.01.2021, 20:13

Zu Letzterem ein JavaScript-Nachtrag:

const frontField = document.getElementById("frontField");
document.getElementById("backField").addEventListener("input", function() {
  if (this.value.length > frontField.value.length) {
    frontField.value += "*";
  }
  else if (this.value.length < frontField.value.length) {
    frontField.value = frontField.value.substring(0, frontField.value.length - 1);
  }
});

Die IDs backField und frontField müssten natürlich noch entsprechend verteilt werden.

Außerdem fehlt noch irgendeine visuelle Anzeige für den Nutzer, dass er das Eingabefeld gerade selektiert hat. Vielleicht setzt man einen dickeren Rahmen für das Feld bei Klick, o.ä..

Ähnliche Beiträge

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zum Beitrag

HTML input speichern?

Hallo, ich möchte meine eigene Website machen und würde gerne das Input speichern. Bitte möglichst kurzer Code. Danke ;)

...zum Beitrag

Python Send Email Error?

Hey leute,

Code:

import smtplib, ssl
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart

sender_email = "//ZENSIERT//"
receiver_email = "//ZENSIERT//"
password = input("Type your password and press enter:")

message = MIMEMultipart("alternative")
message["Subject"] = "multipart test"
message["From"] = sender_email
message["To"] = receiver_email

# Create the plain-text and HTML version of your message
text = """\
Hi,
How are you?
Real Python has many great tutorials:
www.realpython.com"""
html = """\
<html>
  <body>
    <p>Hi,<br>
       How are you?<br>
       <a href="http://www.realpython.com">Real Python</a> 
       has many great tutorials.
    </p>
  </body>
</html>
"""

# Turn these into plain/html MIMEText objects
part1 = MIMEText(text, "plain")
part2 = MIMEText(html, "html")

# Add HTML/plain-text parts to MIMEMultipart message
# The email client will try to render the last part first
message.attach(part1)
message.attach(part2)

# Create secure connection with server and send email
context = ssl.create_default_context()
with smtplib.SMTP_SSL("smtp.gmail.com", 465, context=context) as server:
    server.login(sender_email, password)
    server.sendmail(
        sender_email, receiver_email, message.as_string()
    )

Und ehm ja, google gibt ein Fehler und es wird keine email verschickt.

Und wen ich "Ja, das war ich" drücke kommt das.

...zum Beitrag

HTML input textfeld type=number nachkommastellen

welchen type muss man in html einem input textfeld zuweisen, sodass es nur zahlen mit 2 nachkommastellen akzeptiert?

mit type="number" kommt bei mir immer ungültiger wert wenn ich kommazahlen eingebe. sowohl mit . als auch mit ,

...zum Beitrag

javascript Fehler, wtf?

Hab in meinem ganzen 5 Jahren als js dev noch nie so einen Fehler gehabt.

Code:

<!DOCTYPE html>

<head>

</head>

<body>

<button id="login" onclick="save()">login</button>

var name = document.getElementById("name")

var password = document.getElementById("password")

function save() {

alert(name.value, password.value)

}

</script>

</body>

</html>

ich experimentiere in letzter Zeit wieder etwas mit firebase. Hab als test projekt mal zwei inputs mit login button erstellt. So und jetzt gibt diesen html code mal in eine html file ein und führt es aus. Aus irgendeinem Grund wird bei name undefined alerted und der value von password wird wie erwartet alerted. Warum funktioniert das bei password, aber nicht bei name?? Hab schon mehrere code editoren ausprobiert und überall das gleiche Problem. Weiß jmd wo der Fehler ist?

Mfg Weißbrot

...zum Beitrag

Html Input in Javascript ausgeben?

Ich würde gerne einen HTML Input Text in Javascript ausgeben lassen.

Dazu habe ich bereits ein Script erstellt, in dem ich einer Variable den Wert des HTML Input gebe(Es geht um die Variable "VorName"), mit Hilfe von "document.getElementById". Allerdings will die Variable den Wert nicht annehmen/ändert ihn nicht.

Ich habe auch onclick angewendet

Warum funktioniert das nicht? ) :

Danke im voraus für Tipps und Hilfe

...zum Beitrag

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zum Beitrag

HTML: Zwei Seiten miteinander interagieren lassen?

Hallo,

ich habe ein HTML-Dokument mit einer div, die einen Text enthalten soll, der auf einer anderen mit einem input eingegeben wird. Das heißt, das zwei HTML-Dokumente miteinander interagieren sollen.

Seite 1: In Input wird text "x" eingegeben

Seite 2: text "x" erscheint.

Wie kann ich das möglich machen? Reicht JavaScript dafür aus?

Die Dateien sind lokal im selben Ordner gespeichert.

Vielen Dank im Voraus!

...zum Beitrag

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

...zum Beitrag

Seite wird bei Weiterleitung nicht richtig angezeigt?

Hey,

Ich programmiere gerade etwas in PHP, CSS, HTML, JS... Ich habe ein Button gemacht und wenn mann auf ihn clickt soll mann weitergeleitet werden (JavaScript Funktion).

Die Weiterleitung funktioniert aber wenn mann auf der Seite ist wird nur der PHP Quell text angezeigt...

Ich bitte um hilfe!

Code:

JavaScript Weiterleitung:

<script type="text/javascript">
window.location = "login.php";
</script>

Button:

<form action="weiterleitung-login.html" method="post" class="buttons"><input type="submit" value="Einloggen" class="login"></form>

MfG Dominik

...zum Beitrag

HTML - Uhrzeit - Text?

Hallo, ich will mithilfe von HTML und JavaScript eine kleine Anwendung programmieren.

Die Anwendung soll die Uhrzeit abfragen. Zwischen 6 bis 11:59 Uhr soll der Text „Guten Morgen“ angezeigt werden.

Zwischen 12 und 17:59 Uhr soll der Text „Guten Tag“ angezeigt werden.

Zwischen 18 Uhr und 5:59 Uhr soll der Text „Schönen Abend noch/Schlaf gut“ angezeigt werden.

Der Text, der angezeigt werden soll, ist also von der Uhrzeit abhängig.

wie kann man das mit html und JavaScript machen?

...zum Beitrag

Passwort auslesen lassen Javascript?

Kann ich mir diese Sternchen irgendwie auslesen lassen mit Javascript oder Html?

...zum Beitrag

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zum Beitrag

Wie änder ich den style bei html input type number?

Das Problem ist nicht, die Height oder Width zu verändern, sondern dieses komische Teil, dass immer rechts in der Box ist, mit der man die Zahl verändern kann. Dieses Ding bleibt nicht proportional zu der Höhe des Inputs. Wie kann ich das ändern?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen