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

Question

我有一个显示卢比金额的文本框。我想要在金额 (250 卢比) 前面的 ₹ 符号， ₹ 符号不应该是可编辑的，但文本框中的金额（文本）应该是可编辑的。<input type="text" value="&#8377;">如何实施？

Answer 1

另一种解决方案是<label>在输入前使用标签：

label {

  position:relative;

  left:+15px;

}

input {

  text-align:right;

}

<label for="abc">₹</label><input type="text" id="abc"/>

Answer 2

如果你不想添加任何 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" />

Answer 3

你可以使用 css ::before

给你的输入一类货币

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

然后将其添加到您的 css

    .currency::before{  
         content: "₹";
       .. any other properties like width, height, position, size, color etc..
    }

该符号将出现在输入的外部，而不是输入内部。不过，您可以使用位置和填充将其放置在里面。