TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個(gè)贊
另一種解決方案是<label>在輸入前使用標(biāo)簽：
label {
position:relative;
left:+15px;
}
input {
text-align:right;
}
<label for="abc">?</label><input type="text" id="abc"/>
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果你不想添加任何 js 邏輯，那么你應(yīng)該添加一個(gè)包裝器并在那里硬編碼貨幣。
理想情況下，這是使用 css 偽類的完美場(chǎng)景，如:before.
這個(gè)想法是從 css 添加固定字符：
input:before {
content: '?';
}
不幸的是，偽類不適用于自動(dòng)關(guān)閉的 HTML 元素，例如<input />（這里有一個(gè)更深入的解釋為什么會(huì)發(fā)生這種情況：https://stackoverflow.com/a/27708091/491075），所以你必須添加您輸入的包裝器，最終將包含貨幣符號(hào)。
這是一個(gè)簡(jiǎn)單的示例，說明如何執(zhí)行此操作：
.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 來監(jiān)聽輸入的任何變化，并將貨幣添加到值之前。
這是一個(gè)非常簡(jiǎn)單的示例，說明如何在純 js 中實(shí)現(xiàn)此目的：
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貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
你可以使用 css ::before
給你的輸入一類貨幣
<input type="text" value="₹" class="currency">
然后將其添加到您的 css
.currency::before{
content: "?";
.. any other properties like width, height, position, size, color etc..
}該符號(hào)將出現(xiàn)在輸入的外部，而不是輸入內(nèi)部。不過，您可以使用位置和填充將其放置在里面。
舉報(bào)