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

您是否需要在文本框中输入“ $”？

您最好在html本身中添加“ $”作为标签，因为它始终是价格字段。

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

Answer 2

如果将输入内容包装在<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>

“引导程序样式” -在输入的左侧创建一个伪元素“指示器”

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>

jQuery-设置输入的值和文本

2 个答案: