更改 <input> 字段的显示

Question

我有一个 <input> 字段，格式如下：

<input
    class="form-control"
    data-filter="M"
    id="id_options_price"
    name="options_price"
    tabindex="141"
    type="text"
    value="121000.00">

如何更改 input 的显示方式，以便在某些页面上将此字段显示为 121 000,00（数字组之间有 space），同时保持 value 和 type 属性。

有没有办法用 JS 实现？

Answer 1

如果您不想在输入字段中显示数字，则需要像这样的占位符属性：

<input class="form-control" data-filter="M" id="id_options_price" name="options_price" tabindex="141" type="text" value="121000.00" placeholder="121000.00">

Answer 2

这个解决方案可能很明显而且很愚蠢：您可以使用 2 个元素来执行此操作。

一个具有 "hidden" 类型和表单值的输入元素。一个具有 CSS 样式的 div 元素，仅用于向用户显示。

我认为您无法对输入标签的样式进行足够多的修改以实现纯 CSS 的目标。据我所知，作为特定元素的输入有一部分显示是不可设置的。

编辑：由于问题略有变化，此答案可能无关紧要。

Answer 3

将输入类型设置为"number"。这样数字就会有逗号而不是点，浏览器会在需要时自动将逗号转换为点，例如 JavaScript。

Answer 4

"Is there are some way to do it with JavaScript?"

假设它指的是对象复制方法，是的，我可以在JQuery中向您展示。

我们只需要在输入后插入一个新元素：

$( "#id_options_price" ).after( "<div class='price'>"+$("#id_options_price").val()+"</div>" );

并隐藏原始输入：

$( "#id_options_price" ).hide();

当然，这些行应该在页面加载后调用，i. e. :

$( document ).ready(function() {
     $( "#id_options_price" ).after( "<div class='price'>"+$("#id_options_price").val()+"</div>" );
    $( "#id_options_price" ).hide();
});

更改 <input> 字段的显示

Change presentation of <input> field

html

javascript

css

markup

frontend