在 CakePHP 输入之前添加美元符号 ($)答案

【问题标题】：Add dollar sign ($) before CakePHP input在 CakePHP 输入之前添加美元符号 ($)
【发布时间】：2015-07-27 17:37:55
【问题描述】：

我正在创建一个 CakePHP 3.0 表单，我有几个输入字段 (Form->input)，用户将在其中输入美国货币的值。我想在输入框的左侧添加一个 $ 符号。根据我的研究，CakePHP 的 Form 本身似乎并不支持这一点，所以我相信 CSS 解决方案是理想的。数据库中对应的字段是浮点数。

【问题讨论】：

我从未使用过 cakePHP，但我假设你会使用 :before 伪元素
感谢您的建议！不过，那是我已经尝试过的事情之一。我不确定为什么它不起作用（它根本没有改变外观）所以我仍在研究它。
在这里，我会发布一个答案
您遇到的问题是 CSS 伪元素不适用于输入。
这是否意味着CSS不可能？

标签： css cakephp-3.0

【解决方案1】：

:before 和 :after 应用于容器内，这意味着您可以将其用于带有结束标记的元素。

^Source
基本上，这意味着您不能在输入上使用 before，因为它会将内容插入到输入中。
你可以使用 CSS 的 :before 伪元素来做到这一点，但你必须将输入包装在一个元素中，或者在它之前放置一个元素：

.inputcon:before{
    content:'$'
}

或者，你可以用 jQuery 来做：

$("input").wrap("<span class='inputcon'>");

或者使用 Vanilla JS：

var inputs = document.getElementsByTagName("input");
for(var i =0;i<inputs.length;i++){
    var wrapper = document.createElement("span");
    wrapper.classList.add("inputcon")
    inputs[i].parentNode.insertBefore(wrapper,inputs[i]);
    wrapper.appendChild(inputs[i])
}

【讨论】：

尝试将输入包装在 div 中并在该 div 上使用 :before 或只是尝试将 $ 符号放在输入之前的问题是，美元符号和输入。
你可能想用JS，如果有换行符
只是为了确保我们在同一页面上，问题是它显示时带有换行符，而我希望 $ 符号紧接在输入之前出现在同一行上。
@Jozomby 是的，我一开始看错了你的评论。会用JS吗？
是的，我可以。不过，我对此不是很有经验。

【解决方案2】：

听起来您想覆盖输入模板以在输入字段之前包含$。默认输入模板是<input type="{{type}}" name="{{name}}"{{attrs}}>，所以会改为$ <input type="{{type}}" name="{{name}}"{{attrs}}>。

http://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses

您可以覆盖整个表单（可能不是您想要的），或者只是一个输入。本书中的大多数示例向您展示了如何覆盖整个表单，但您可以只覆盖那个输入字段。 http://api.cakephp.org/3.0/class-Cake.View.Helper.FormHelper.html#_input

将字段本身限制为仅适用于货币的数字/符号是 javascript/html5 问题，与 cake 不同。如果这是您想要的，您还应该使用 cake 验证服务器端。

另外，有点离题，货币字段不应该在数据库中存储为浮点数。它们应该存储为一些固定精度类型（如mysql中的十进制类型）。

【讨论】：

谢谢！这绝对似乎是我需要的方向。但是，我不明白的一件事是如何覆盖该输入的模板。从您链接到的文档看来，这个想法似乎是在输入中使用类似 'templates' => 'currency' 的东西来告诉它使用不同的模板。然后，该新模板应位于 /config/currency.php 中。但我不确定该文件中究竟要放什么。