Trường nhập văn bản HTML có ký hiệu tiền tệ

Tôi muốn có một trường nhập văn bản có chứa ký hiệu "$" ngay từ đầu và bất kể trường hợp nào xảy ra chỉnh sửa, để ký hiệu này luôn tồn tại.

Tôi sẽ rất tốt nếu chỉ những con số được chấp nhận cho đầu vào, nhưng đó chỉ là một bổ sung ưa thích.

Xem xét mô phỏng trường nhập với tiền tố hoặc hậu tố cố định bằng cách sử dụng khoảng có đường viền xung quanh trường nhập không có đường viền. Đây là một ví dụ khởi động cơ bản:

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

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

Sử dụng .input-icondiv cha . Thêm tùy ý .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>

Căn chỉnh biểu tượng theo chiều dọc với transformvà topvà đặt pointer-eventsđể nonecác nhấp chuột tập trung vào đầu vào. Điều chỉnh paddingvà widthkhi thích hợp:

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

Không giống như câu trả lời được chấp nhận, điều này sẽ giữ lại đánh dấu xác thực đầu vào, chẳng hạn như đường viền màu đỏ khi có lỗi.

Ví dụ sử dụng JSFiddle với Bootstrap và Font Awesome

Bạn có thể bao bọc trường nhập của mình thành một khoảng, mà bạn position:relative;. Sau đó, bạn thêm :before content:"€"ký hiệu tiền tệ của mình và tạo ra nó position:absolute. JSFiddle làm việc

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

Cập nhật Nếu bạn muốn đặt biểu tượng đồng euro ở bên trái hoặc bên phải của hộp văn bản. JSFiddle làm việc

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

Vì bạn không thể làm ::beforevới content: '$'đầu vào và thêm một phần tử được định vị hoàn toàn sẽ thêm html - tôi thích làm với css nội tuyến SVG.

Nó đi một cái gì đó như thế này:

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

Nó xuất ra như sau:

Lưu ý: tất cả mã phải nằm trên một dòng. Hỗ trợ khá tốt trong các trình duyệt hiện đại, nhưng hãy nhớ kiểm tra.

Cuối cùng, tôi cần loại vẫn còn ở dạng số, vì vậy đã sử dụng CSS để đẩy ký hiệu đô la vào trường nhập bằng cách sử dụng vị trí tuyệt đối.

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

Đặt '$' trước trường nhập văn bản, thay vì đặt bên trong trường. Nó làm cho việc xác thực dữ liệu số dễ dàng hơn rất nhiều vì bạn không phải phân tích cú pháp '$' sau khi gửi.

Bạn có thể, với JQuery.validate () (hoặc khác), thêm một số quy tắc xác thực phía máy khách để xử lý tiền tệ. Điều đó sẽ cho phép bạn có '$' bên trong trường đầu vào. Nhưng bạn vẫn phải thực hiện xác thực phía máy chủ để bảo mật và điều đó khiến bạn trở lại vị thế phải xóa '$'.

 $<input name="currency">

Xem thêm: Hạn chế nhập vào hộp văn bản: chỉ cho phép số và dấu thập phân

Nếu bạn chỉ cần hỗ trợ Safari, bạn có thể làm như sau:

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

và một trường đầu vào như

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

Bằng cách này, bạn không cần thêm thẻ và giữ thông tin ký hiệu trong phần đánh dấu.

Một giải pháp khác mà tôi thích là sử dụng một yếu tố đầu vào bổ sung cho hình ảnh của biểu tượng tiền tệ. Đây là ví dụ sử dụng hình ảnh kính lúp trong trường văn bản tìm kiếm:

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

Điều này dẫn đến đầu vào trên thanh bên trái ở đây:

https://fsfe.org

Tôi vừa sử dụng: before với đầu vào và chuyển $ làm nội dung

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

Đối với bootstrap hoạt động của nó

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

Không sử dụng class = "form-control" trong trường đầu vào.

Không câu trả lời nào trong số những câu trả lời này thực sự hữu ích nếu bạn lo lắng về việc căn chỉnh đường viền bên trái với các trường văn bản khác trên biểu mẫu nhập liệu.

Tôi khuyên bạn nên đặt ký hiệu đô la hoàn toàn sang trái khoảng -10px hoặc sang trái 5px (tùy thuộc vào việc bạn muốn nó bên trong hay bên ngoài hộp nhập liệu). Giải pháp bên trong yêu cầu hướng: rtl trên css đầu vào.

Bạn cũng có thể thêm phần đệm vào đầu vào để tránh hướng: rtl, nhưng điều đó sẽ thay đổi chiều rộng của vùng chứa đầu vào để không khớp với các vùng chứa khác có cùng chiều rộng.

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

hoặc là

<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

Ví dụ: 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>

%

Có, nếu bạn đang sử dụng bootstrap, điều này sẽ hoạt động.

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

và

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