Placeholder im Eingabefeld aufteilen

Spinatkrieger · 30. Januar 2020

Hallo zusammen,

ich bin gerade dabei ein Eingabefeld für meine Webseite zu programmieren, bis jetzt sieht es so aus:

<input type="text" id="name" name="name" required

minlength="2" maxlength="2" size="15" placeholder="10.000 EUR" p style="font-size:22px">

Als Placeholder habe ich 10.000 EUR eingegeben, das würde ich gerne aufteilen so dass die 10.000 immer vorne steht und EUR immer ganz hinten am Ende des Eingabefeldes steht. Zudem würde ich es gerne so haben das der hintere Teil des Placeholders also EUR bei Klick und Eingabe in das Feld immer stehen bleibt, mit welchen Befehlen kann man so etwas machen? Danke im voraus für alle hilfreichen Antworten.

Es grüßt der Spinatkrieger

Arne Drews · 30. Januar 2020

Dann darfst Du das EUR nicht als Placeholder anwenden. Ein Placeholder verschwindet per Standard, sobald der value einen Wert hat.

Baue Dir ein eigenes INPUT Element:

HTML

<div class="my-input">
    <div class="input"><input type="text" name="foo" placeholder="10.000"></div>
    <div class="currency">EUR</div>
</div>

Bisschen CSS samt flex, dann sollte das schon ganz gut hinkommen.

Spinatkrieger · 31. Januar 2020

Das funktioniert leider auch nicht, wie kann man das sonst noch programmieren? Ich kenne mich mit CSS nicht so aus und mit flex erst recht nicht.

basti1012 · 31. Januar 2020

Was funktioniert den dabei nicht ?

Das was arne da schon gepostet hat ist doch sogesehen schon alles.

Das EUR bleibt ja stehen wenn du was in das input Feld schreiben tust.

Mit Css muss man das nur noch schön gestallten.

Das reicht doch schon

Code

<style>
  .input input{
  width:120px;
}
.input:after{
  content:'EUR';
  margin-left:-40px;
  color:rgba(0,0,0,0.6)
}
</style>
<div class="my-input">
    <div class="input"><input type="text" name="foo" placeholder="10.000"></div>
</div>

Alles anzeigen

Wenn du es anders meinst dann erkläre es nochmal genauer

m.scatello · 31. Januar 2020

Zitat von basti1012

Was funktioniert den dabei nicht ?

denn, basti, denn!!! Mit 2 n

Placeholder im Eingabefeld aufteilen

Jetzt mitmachen!

Teilen