JQuery - установить значение и текст ввода

Question

У меня есть форма, и я автоматически заполняю поле цены с помощью API.То, что я хотел бы сделать, это установить значение ввода (что отправляется) в число, но в фактическом поле ввода я хочу, чтобы оно отображалось в ценовом формате.

$(function() {
  var price = 3.25;
  $('input').val(price);
  $('input').text('$' + price);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price" type="text" />

Как в приведенном выше примере, как сделать так, чтобы полученное значение было просто необработанным числом 3.25, но отображалось бы как $3.25 в фактическом поле ввода?

Answer 1

Если вы поместили свой ввод в <span>, вы можете наложить на него какой-нибудь стиль, чтобы он выглядел так, как если бы он имел предшествующий $, не затрагивая его value.Используя этот метод, вам просто нужно обернуть ваш ввод в <span class="currency"></span>, а об остальном позаботится с помощью CSS.

---

Обычный - Абсолютно позиционирует псевдо-элемент на левом входе

var price = 3.25;
$('#price').val(price);

.currency {
  position: relative;
  font-size: 14px;
}

.currency::before {
  position: absolute;
  display: inline-block;
  content: '$';
  left: 3px;
  top: 0;
}

.currency input[type=text] {
  padding-left: 9px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="currency"><input type="text" id="price" /></span>

---

«Bootstrap Style» - Создать «индикатор» псевдоэлемента слева от входа

var price = 3.25;
$('#price').val(price);

.currency {
  font-size: 15px;
}

.currency::before {
  display: inline-block;
  content: '$';
  padding: 4px 6px;
  border: 1px solid #ccc;
  background-color: #efefef;
  font-weight: bold;
}

.currency > input[type=text] {
  padding: 5px;
  border: 1px solid #ccc;
  border-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="currency"><input type="text" id="price" /></span>

Answer 2

Вам нужен '$' внутри текстового поля?

Вы можете лучше добавить '$' в сам HTML в качестве метки, так как всегда это поле цены.

<lable>$</label><input id="price" type="text" />