TA貢獻1719條經驗 獲得超6個贊
另一種解決方案是<label>在輸入前使用標簽：
label {
position:relative;
left:+15px;
}
input {
text-align:right;
}
<label for="abc">?</label><input type="text" id="abc"/>
TA貢獻1797條經驗 獲得超6個贊
如果你不想添加任何 js 邏輯，那么你應該添加一個包裝器并在那里硬編碼貨幣。
理想情況下，這是使用 css 偽類的完美場景，如:before.
這個想法是從 css 添加固定字符：
input:before {
content: '?';
}
不幸的是，偽類不適用于自動關閉的 HTML 元素，例如<input />（這里有一個更深入的解釋為什么會發生這種情況：https://stackoverflow.com/a/27708091/491075），所以你必須添加您輸入的包裝器，最終將包含貨幣符號。
這是一個簡單的示例，說明如何執行此操作：
.input-wrapper {
position: relative;
}
.input-wrapper:before {
content: attr(data-currency);
position: absolute;
left: 0.25em;
top: 0;
}
.input-wrapper > input {
text-indent: 1em;
}
<div class="input-wrapper" data-currency="?">
<input type="number" />
</div>
<div class="input-wrapper" data-currency="$">
<input type="number" />
</div>
<div class="input-wrapper" data-currency="€">
<input type="number" />
</div>
如果你不能或不想改變 DOM，那么你可以使用 javascript 來監聽輸入的任何變化，并將貨幣添加到值之前。
這是一個非常簡單的示例，說明如何在純 js 中實現此目的：
const currencySymbol = '$'
const input = document.getElementById('currency-input')
input.addEventListener('keyup', function(e) {
input.value = input.value[0] === currencySymbol
? input.value
: `${currencySymbol}${input.value}`
})
<input id="currency-input" value="$0" />
TA貢獻1784條經驗 獲得超7個贊
你可以使用 css ::before
給你的輸入一類貨幣
<input type="text" value="₹" class="currency">
然后將其添加到您的 css
.currency::before{
content: "?";
.. any other properties like width, height, position, size, color etc..
}該符號將出現在輸入的外部，而不是輸入內部。不過，您可以使用位置和填充將其放置在里面。
舉報