如何在文本框中的文本前面放置 ₹ 符号，不应该编辑？

Question

我有一个显示卢比金额的文本框。

我想要在金额 (250 卢比) 前面的 ₹ 符号， ₹ 符号不应该是可编辑的，但文本框中的金额（文本）应该是可编辑的。

<input type="text" value="&#8377;">

如何实施？

Answer 1

另一种解决方案是<label>在输入前使用标签：label {&nbsp; position:relative;&nbsp; left:+15px;}input {&nbsp; text-align:right;}<label for="abc">₹</label><input type="text" id="abc"/>

Answer 2

如果你不想添加任何 js 逻辑，那么你应该添加一个包装器并在那里硬编码货币。理想情况下，这是使用 css 伪类的完美场景，如:before.这个想法是从 css 添加固定字符：input:before {&nbsp; content: '₹';}不幸的是，伪类不适用于自动关闭的 HTML 元素，例如<input />（这里有一个更深入的解释为什么会发生这种情况：https://stackoverflow.com/a/27708091/491075），所以你必须添加您输入的包装器，最终将包含货币符号。这是一个简单的示例，说明如何执行此操作：.input-wrapper {&nbsp; position: relative;}.input-wrapper:before {&nbsp; content: attr(data-currency);&nbsp; position: absolute;&nbsp; left: 0.25em;&nbsp; top: 0;}.input-wrapper > input {&nbsp; text-indent: 1em;}<div class="input-wrapper" data-currency="₹">&nbsp; <input type="number" /></div><div class="input-wrapper" data-currency="$">&nbsp; <input type="number" /></div><div class="input-wrapper" data-currency="€">&nbsp; <input type="number" /></div>如果你不能或不想改变 DOM，那么你可以使用 javascript 来监听输入的任何变化，并将货币添加到值之前。这是一个非常简单的示例，说明如何在纯 js 中实现此目的：const currencySymbol = '$'const input = document.getElementById('currency-input')input.addEventListener('keyup', function(e) {&nbsp; input.value = input.value[0] === currencySymbol&nbsp; &nbsp; ? input.value&nbsp; &nbsp; : `${currencySymbol}${input.value}`})<input id="currency-input" value="$0" />

Answer 3

你可以使用 css ::before给你的输入一类货币<input&nbsp;type="text"&nbsp;value="&#8377;"&nbsp;class="currency">然后将其添加到您的 css&nbsp;&nbsp;&nbsp;&nbsp;.currency::before{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;"₹"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;..&nbsp;any&nbsp;other&nbsp;properties&nbsp;like&nbsp;width,&nbsp;height,&nbsp;position,&nbsp;size,&nbsp;color&nbsp;etc.. &nbsp;&nbsp;&nbsp;&nbsp;}该符号将出现在输入的外部，而不是输入内部。不过，您可以使用位置和填充将其放置在里面。