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

Question

Tôi muốn có trường nhập văn bản có chứa ký hiệu "$" ngay từ đầu và bất kể việc chỉnh sửa nào xảy ra với trường, để dấu hiệu liên tục.

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

Answer 1

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

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

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

Answer 2

$<input name="currency"> 

Xem thêm: Restricting input to textbox: allowing only numbers and decimal point

Answer 3

Đặt '$' ở phía trước của trường nhập văn bản, thay vì bên trong nó. 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 '$' sau khi gửi.

Bạn có thể, với JQuery.validate() (hoặc loại khác), thêm một số quy tắc xác thực phía máy khách xử lý đơn vị tiền tệ. Điều đó sẽ cho phép bạn có '$' bên trong trường nhập. 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 đó giúp bạn quay lại vị trí phải xóa '$'.

Answer 4

Một giải pháp mà tôi thích là sử dụng một yếu tố đầu vào bổ sung cho một hình ảnh của biểu tượng tiền tệ. Dưới đây là một ví dụ sử dụng một hình ảnh của một kính lúp trong một lĩnh vực 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 các đầu vào trên thanh bên trái ở đây:

https://fsfe.org

Answer 5

Sử dụng cha mẹ .input-icon div. Tùy chọn thêm .input-icon-right.

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

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

Căn biểu tượng theo chiều dọc với transform và top, và thiết lập pointer-events-none để các nhấp chuột tập trung vào các đầu vào. Điều chỉnh padding và width như 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ác câu trả lời được chấp nhận, điều này sẽ giữ lại đầu vào làm nổi bật xác nhận, chẳng hạn như một đường viền màu đỏ khi có một lỗi.

JSFiddle usage example with Bootstrap and Font Awesome

Answer 6

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

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

và một lĩnh vực đầu vào như

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

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

Answer 7

Bạn có thể quấn trường nhập của bạn vào một khoảng thời gian mà bạn position:relative;. Sau đó, bạn thêm với :beforecontent:"€" ký hiệu tiền tệ của bạn và làm cho nó position:absolute. Làm việc 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; 
} 

Cập nhật Nếu bạn muốn đặt biểu tượng đồng euro hoặc bên trái hoặc bên phải của hộp văn bản. Làm việc 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; 
} 

Answer 8

Vì bạn không thể làm ::before với content: '$' đầu vào và thêm một yếu tố hoàn toàn vị trí bổ sung thêm html - Tôi thích làm gì để một nền SVG inline css.

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ó ra như sau:

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

Answer 9

Đối bootstrap tác phẩm của mình

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

Không sử dụng class = "hình thức kiểm soát" trong lĩnh vực đầu vào.

Answer 10

.currencyinput { 
 
    border: 1px inset #ccc; 
 
    padding-bottom: 1px;//FOR IE & Chrome 
 
} 
 
.currencyinput input { 
 
    border: 0; 
 
}

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