it-swarm.com.de

HTML-Texteingabefeld mit Währungssymbol

Ich hätte gerne ein Texteingabefeld, das ganz am Anfang das Zeichen "$" enthält, und unabhängig davon, welche Bearbeitung das Feld vornimmt, damit das Zeichen dauerhaft bleibt.

Ich wäre gut, wenn nur Zahlen zur Eingabe akzeptiert würden, aber das ist nur eine schicke Ergänzung.

84
User3419

Sie können ein Eingabefeld mit einem festen Präfix oder Suffix simulieren, indem Sie einen Bereich mit einem Rand um ein randloses Eingabefeld verwenden. Hier ist ein grundlegendes Kickoff-Beispiel:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>

87
BalusC

Verwenden Sie einen übergeordneten .input-icon div. Fügen Sie optional .input-icon-right hinzu.

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i>€</i>
</div>

Richten Sie das Symbol vertikal mit transform und top aus, und setzen Sie pointer-events auf none, damit Klicks auf die Eingabe fokussieren. Passen Sie die Variable padding und width entsprechend an:

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

Im Gegensatz zur akzeptierten Antwort wird die Hervorhebung der Eingabevalidierung beibehalten, z. B. ein roter Rand, wenn ein Fehler auftritt.

JSFiddle-Anwendungsbeispiel mit Bootstrap und Font Awesome

50
rybo111

Sie können Ihr Eingabefeld in einen Bereich umschließen, den Sie position:relative; eingeben. Dann fügen Sie mit :beforecontent:"€" Ihr Währungssymbol hinzu und machen es position:absolute. Arbeiten JSFiddle

HTML

<span class="input-symbol-euro">
    <input type="text" />
</span>

CSS

.input-symbol-euro {
    position: relative;
}
.input-symbol-euro input {
    padding-left:18px;
}
.input-symbol-euro:before {
    position: absolute;
    top: 0;
    content:"€";
    left: 5px;
}

Update Wenn Sie das Euro-Symbol entweder auf die linke oder rechte Seite des Textfelds setzen möchten. Arbeiten JSFiddle

HTML

<span class="input-euro left">
    <input type="text" />
</span>
<span class="input-euro right">
    <input type="text" />
</span>

CSS

 .input-euro {
     position: relative;
 }
 .input-euro.left input {
     padding-left:18px;
 }
 .input-euro.right input {
     padding-right:18px;
     text-align:end; 
 }

 .input-euro:before {
     position: absolute;
     top: 0;
     content:"€";
 }
 .input-euro.left:before {
     left: 5px;
 }
 .input-euro.right:before {
     right: 5px;
 }
27
Philipp Hofmann

Da Sie ::before nicht mit content: '$' für Eingaben machen können und ein absolut positioniertes Element hinzufügen kann, wird HTML hinzugefügt. 

Es geht ungefähr so:

input {
    width: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
    padding-left: 12px;
}

Es gibt Folgendes aus:

 svg dollar sign background css

Hinweis: Der Code muss sich in einer einzigen Zeile befinden. Die Unterstützung ist in modernen Browsern ziemlich gut, aber testen Sie sie unbedingt.

15
Jeff Callahan

Setzen Sie das '$' vor das Texteingabefeld und nicht in das Feld. Dadurch wird die Validierung numerischer Daten erheblich vereinfacht, da Sie das '$' nach dem Senden nicht analysieren müssen.

Sie können mit JQuery.validate () (oder anderem) einige clientseitige Validierungsregeln hinzufügen, die mit der Währung umgehen. Das würde Ihnen erlauben, das '$' im Eingabefeld zu haben. Sie müssen jedoch immer noch serverseitige Überprüfungen zur Sicherheit durchführen, wodurch Sie wieder in die Lage versetzt werden, das '$' zu entfernen.

3
dnagirl

Wenn Sie nur Safari unterstützen müssen, können Sie dies folgendermaßen tun:

input.currency:before {
  content: attr(data-symbol);
  float: left;
  color: #aaa;
}

und ein Eingabefeld wie 

<input class="currency" data-symbol="€" type="number" value="12.9">

Auf diese Weise benötigen Sie kein zusätzliches Tag und behalten die Symbolinformationen im Markup.

2
Sebastian
1
Quentin
<style>
.currencyinput {
    border: 1px inset #ccc;
    
    border-left:none;
}
.currencyinput input {
    border: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>

%

0
Ashish Rajput

Ich brauchte schließlich den Typ, um immer noch als Zahl zu bleiben, also benutzte CSS, um das Dollarzeichen mit einer absoluten Position in das Eingabefeld zu schieben.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>

0
Andy

Ich habe gerade verwendet: Vorher mit der Eingabe und $ als Inhalt übergeben

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}
0

Keine dieser Antworten ist wirklich hilfreich, wenn Sie den linken Rand mit anderen Textfeldern in einem Eingabeformular ausrichten möchten.

Ich würde empfehlen, das Dollarzeichen absolut nach links um -10px oder links 5px zu positionieren (abhängig davon, ob Sie es innerhalb oder außerhalb des Eingabefeldes möchten). Die innere Lösung erfordert Richtung: RTL auf der Eingabe-CSS.

Sie können der Eingabe auch eine Auffüllung hinzufügen, um die Richtung zu vermeiden: rtl. Dies ändert jedoch die Breite des Eingabecontainers, sodass er nicht mit den anderen Containern derselben Breite übereinstimmt.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

oder

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

https://i.imgur.com/ajrU0T9.png

Beispiel: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

0
Ted Scheckler

Eine andere Lösung, die ich bevorzuge, ist die Verwendung eines zusätzlichen Eingabeelements für ein Bild des Währungssymbols. Hier ein Beispiel, bei dem ein Bild einer Lupe in einem Suchtextfeld verwendet wird:

html:

<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">

css:

#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}

Dies führt zur Eingabe in der linken Seitenleiste hier:

https://fsfe.org

0
Sam Tuke