如何將美元符號添加到字段中而不將其包含在值中

Question

我需要向顯示付款總額的框添加美元符號，但我不希望該美元符號包含在「值」標記中。這是我現在擁有的。

<input type="number" class="total" id="totalpaying" name="totalpaying" value="<% total %>" readonly>

Answer 1

使用Css你可以實現這一點。

HTML

<div class="text">input type="number" class="total" id="totalpaying" name="totalpaying" value="<% total %>" readonly></div> 

的CSS

<style> 
div.text{ 
position:relative; 
padding-left: 20px; 
} 

div.text:after{ 
position: absolute; 
    left: 6px; 
    top: 2px; 
    content: '$'; 
} 
</style> 

下面是代碼https://jsfiddle.net/12efgo6t/1/

Answer 2

由於寫的，問題的答案是 「你不能」。如果您希望<input>元素顯示「$ 1.00」，則「$」將需要成爲value屬性的一部分。

現在，有人說，有辦法做你想做的事情，主要涉及使用Javascript來管理輸入元素的值。

例如，您可以添加事件處理程序來處理處於各種狀態的值。

1. 當輸入元件與值「1」初始化後，添加一些Javascript來取「1」，並將其格式化爲「$ 1.00」

2. 當用戶點擊在輸入元件元件（或標籤）開始編輯，使用onFocus處理程序去除「$」符號，以便用戶正在編輯「1.00」

3. 當用戶單擊其他位置（或從輸入元素），請使用onBlur處理程序將值重新格式化爲「$ 1.00」

這是一個非常簡單的例子，並根據您的需要，可能是也可能不是你想要的。當然，我們可以在編輯過程中爲onFocus，onChange,onKeyUp/onKeyDown和onBlur處理程序編寫JavaScript處理程序，以便在那裏保留「$」，但這會更加複雜。

Answer 3

1. 創建一個樣式像一個文本框
2. 這裏面容器容器添加兩個內聯元素：
   • 跨度持有的貨幣符號
   • 輸入文本框來保存值
3. 將輸入元素設置爲沒有邊框。

這將創建帶有貨幣符號的文本框的錯覺。該符號不可編輯。