在输入 html 中轻柔绑定到十进制只允许 [0-9]答案

【问题标题】：breeze binding to decimal in a input html only allows [0-9]在输入 html 中轻柔绑定到十进制只允许 [0-9]
【发布时间】：2014-08-28 17:28:44
【问题描述】：

我正在使用微风 1.4.5 和角度 1.2.1 我正在使用输入类型“text”

直接将微风实体绑定到 decimal 类型的属性

 <input class="form-control" type="text" ng-model="vm.transaction.ListPrice" />

这样做时，它只接受该字段中的数字 0-9（忽略逗号、小数点和其他字符）

绑定到实体的 text 属性的另一个输入工作正常，所以它必须是我不理解的幕后东西

（我不使用“数字”类型，因为我不喜欢输入字段中用于向上/向下选择的按钮。）

【问题讨论】：

我会编写自定义指令来过滤输入文本
我有same problem，当数据变化时解析字符串很容易，这使得无法获得小数点后的数字。

标签： angularjs breeze

【解决方案1】：

如果问题仍然存在，请尝试使用微风指令。 zFloat 指令解决了这个问题。

http://www.breezejs.com/breeze-labs/breezedirectivesfloat

【讨论】：

【解决方案2】：

好的，现在微风中的家伙想出了一个解决方案（zfloat 角度指令）：

http://www.breezejs.com/breeze-labs/breezedirectivesfloat

【讨论】：

【解决方案3】：

使用数字输入类型并通过此 css 规则隐藏箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

请参阅this answer 了解替代方法。
我认为使用数字输入类型比使用文本更容易并且在语法上更好。

【讨论】：

【解决方案4】：

我使用了上述来自 notme 的建议，但需要添加一些内容以防止验证成为问题。

数字的输入类型允许小数点，这样很好。

notme 的 CSS 关闭了微调器，这也有帮助。

但是，当字段中有小数时，引导程序仍然使字段突出显示为红色。当有小数点时，这点 CSS 会使字段看起来是蓝色的：

input:focus:invalid { color:#333; border-color: rgba(82, 168, 236, 0.8); } 

input:focus:invalid:focus, 
textarea:focus:invalid:focus, 
select:focus:invalid:focus { 
    border-color: rgba(82, 168, 236, 0.8); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 

}

用小数解决引导验证问题的替代方法

使用 step="any" 如：

<input type="number" step="any" />

【讨论】：