Para birimi simgeli HTML metin giriş alanı

En başında "$" işaretini içeren bir metin giriş alanına sahip olmak istiyorum ve alanda hangi düzenleme olursa olsun, işaretin kalıcı olması için.

Giriş için sadece sayılar kabul edilse iyi olurdum, ama bu sadece süslü bir ekleme.

Kenarlıksız bir giriş alanı etrafında kenarlığı olan bir yayılma alanı kullanarak sabit bir önek veya sonek içeren bir giriş alanını simüle etmeyi düşünün. İşte temel bir başlangıç ​​örneği:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Bir üst .input-icondiv kullanın . İsteğe bağlı olarak ekleyin .input-icon-right.

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

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

İle dikey simgeyi hizalayın transformve topve seti pointer-eventsiçin noneo tıklama girişi odaklanmak böylece. paddingVe widthuygun şekilde ayarlayın :

.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;
}

Kabul edilen cevabın aksine, bu, bir hata olduğunda kırmızı kenarlık gibi giriş doğrulama vurgulamasını koruyacaktır.

Bootstrap ve Font Awesome ile JSFiddle kullanım örneği

Girdi alanınızı sizin tarafınızdan olan bir aralığa kaydırabilirsiniz position:relative;. Sonra :before content:"€"para birimi sembolünüzle eklersiniz ve yaparsınız position:absolute. Çalışma 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;
}

Güncelle Euro sembolünü metin kutusunun soluna veya sağına koymak isterseniz. Çalışma 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;
 }

Yapamayacağı yana ::beforeolan content: '$'girdiler ve kesinlikle konumlandırılmış eleman ekleyerek ekstra html ekler - Bir arka plan SVG satır içi css yapmak gibi.

Şöyle bir şey oluyor:

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;
}

Aşağıdakileri verir:

Not: Kodun tamamı tek bir satırda olmalıdır. Modern tarayıcılarda destek oldukça iyidir, ancak mutlaka test edin.

Türün hala bir sayı olarak kalmasına ihtiyaç duydum, bu yüzden mutlak bir konum kullanarak dolar işaretini giriş alanına itmek için CSS'yi kullandım.

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

Metin giriş alanının içine değil önüne '$' koyun. Sayısal verilerin doğrulamasını çok daha kolay hale getirir çünkü gönderdikten sonra '$' değerini ayrıştırmanız gerekmez.

Sen ile yapabilirsiniz JQuery.validate () (veya başka), sap para bazı istemci tarafı doğrulama kurallarını ekleyin. Bu, giriş alanının içinde '$' olmasını sağlar. Ancak yine de güvenlik için sunucu tarafında doğrulama yapmanız gerekiyor ve bu da sizi '$' işaretini kaldırmanız gerektiği konumuna geri getiriyor.

 $<input name="currency">

Ayrıca bkz: Metin kutusuyla girişi kısıtlama: yalnızca sayılara ve ondalık noktaya izin verilir

Yalnızca Safari'yi desteklemeniz gerekiyorsa, bunu şu şekilde yapabilirsiniz:

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

ve gibi bir giriş alanı

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

Bu şekilde fazladan bir etikete ihtiyacınız olmaz ve sembol bilgilerini işaretlemede tutarsınız.

Tercih ettiğim başka bir çözüm, para birimi simgesinin bir görüntüsü için ek bir girdi öğesi kullanmaktır. Aşağıda, bir arama metin alanında bir büyüteç görüntüsünün kullanıldığı bir örnek verilmiştir:

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;
}

Bu, sol kenar çubuğundaki girişle sonuçlanır:

https://fsfe.org

Az önce kullandım: girişle daha önce ve içerik olarak $ geçti

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

Bootstrap için çalışmaları

<span class="form-control">$ <input type="text"/></span>

Giriş alanında class = "form-control" kullanmayın.

Sol sınırı bir giriş formundaki diğer metin alanlarıyla hizalamakla ilgileniyorsanız, bu yanıtların hiçbiri gerçekten işe yaramaz.

Dolar işaretini kesinlikle sola yaklaşık -10px veya sol 5px olarak konumlandırmanızı öneririm (giriş kutusunun içinde veya dışında olmasını isteyip istemediğinize bağlı olarak). İç çözüm, yön gerektirir: css girişinde rtl.

Yön: rtl'den kaçınmak için girdiye dolgu da ekleyebilirsiniz, ancak bu, giriş kabının genişliğini aynı genişlikteki diğer kaplarla eşleşmeyecek şekilde değiştirir.

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

veya

<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

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

<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>

%

Evet, bootstrap kullanıyorsanız bu işe yarar.

.form-control input {
    border: none;
    padding-left: 4px;
}

ve

<span class="form-control">$ <input type="text"/></span>

.currencyinput {
    border: 1px inset #ccc;

    border-left:none;
}
.currencyinput input {
    border: 0;`enter code here`
}

<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>