Question

我有一个HTML'输入'，我是双向绑定到十进制数字。问题是尝试输入小数点不会显示。但是如果我'把'插入数字中间的插入符号，然后点击'。'，那么它会插入它 - 但是它会在数字后截断测试的其余部分。在不同情况下，小数键按键确实很奇怪。

<table id="readings" class="table table-condensed table-striped table-hover">
<tbody>
    <tr data-ng-repeat="rdg in vm.readings">
        <td>{{rdg.Value}} {{rdg.Uom}}</td>
        <td>
            <div class="input-group input-group-sm" style="width: 100%">
                <input class="form-control" data-ng-model="rdg.ManualValue"
                        placeholder="Manual..." />                                              
            </div>

        </td>
    </tr>
</tbody>
</table>

rdg.ManualValue是一个数字，我理解在AngularJS中启动这个额外数字验证，无论输入'type'如何。但有没有办法让小数“自然”输入？即当你输入它们时？

奖金问题：有没有办法在任何数字条目中隐藏数字微调器？

感谢您的任何建议。科里。

Answer 1

尝试<input class="form-control" data-ng-model="rdg.ManualValue" placeholder="Manual..." step="any" type="number" />

对于隐藏数字微调器，请使用此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 */
}

Answer 2

我使用JQuery来设置一个按键事件，该事件在输入时检查有效值.type = number的问题是它允许您键入无效值，然后检查有效性。

        jQuery(this).bind (
            "keypress",

            function (e) {

                if( e.which!=8 && e.which!=0 && e.which!=46 && (e.which<48 || 
                         e.which>57) && e.which != 45) { return false;}
                if(e.which != 8 && e.which != 0) {
                    var r = /^-?(\d*)\.{0,1}(\d*)$/ ;
                    var curval ;
                    if(this.value) {
                        curval = this.value + String.fromCharCode(e.which);
                    } else {
                        curval = String.fromCharCode(e.which);
                    }

                    if(!r.test(curval)) {
                        return false;
                    }
                }
            }
        );

AngularJS双向绑定输入到十进制数

2 个答案: