Question

function validateFloatKeyPress(el, evt)
    {
        var charCode = (evt.which) ? evt.which : event.keyCode;

        var number = el.value.split('.');



        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        {
            return false;
        }
        //just one dot
        if (number.length > 1 && charCode == 46)
        {
            return false;
        }



        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > 2))
        {
            return false;
        }
        return true;
    }

    //thanks: http://javascript.nwbox.com/cursor_position/
    function getSelectionStart(o)
    {
        if (o.createTextRange)
        {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

<td style="height:32px">
<input style="height:27px" name="hispanicLatino" class="numeral form-control text-font-md" type="text" oncopy="return false"
 oncut="return false" onpaste="return false" maxlength="100.000" onkeypress="return validateFloatKeyPress(this,event);" 
   data-bind="css: , attr: {id: 'hispanicLatino' + ($index() + 1), title: $parent.hispanicLatinoToolTip}, value: $data.hispanicLatino">
                                        </td>

更新了我的代码。现在我的代码在“。”之后将小数限制为3位小数。但现在是“。”的左侧部分。不锁定到100.您可以输入1111111111等。不知道我应该添加什么。

Answer 1

我不确定为什么你在这里依赖JavaScript，看起来本机表单控件就足够了。请考虑以下代码：

<form>
<input type="number" min="0.000" max="100.000" step=".001" required />
<button type="submit">Submit</button>
</form>

最小值已设置为0.000，100.000处的最大值设置为.001步长（数字增加的速率）。低于最小值或高于最大值的任何值都将触发表单错误。

当然我会使用JavaScript来增加用户的清晰度，但就原始“使这个形式'工作'而言，似乎只有HTML才能提供解决方案。

Answer 2

听起来你需要限制计算中的小数位数？如果是这种情况，您可以在代码中尝试类似的内容：finalValue = ($(me).val() + currentValue).toFixed(3);

检查此链接以获取有关toFixed方法的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Answer 3

如果您需要立即验证而不是仅在提交时，您可以尝试使用自定义的敲除绑定来拦截值，然后再将它们写入视图模型。这有助于绕过淘汰赛的默认textInput绑定，它可以处理许多特定于浏览器的怪癖。

＆＃13;

//prevent values from updating unless they pass a validator function
ko.bindingHandlers.gatedValue = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    //element -> viewmodel
    var validator = allBindings().gatedValidator;
    $(element).on("keydown change keyup",
      function() {
        var newValue = $(element).val();
        var target = valueAccessor();
        if (validator(newValue)) {
          target(newValue);
        } else {
          $(element).val(target()); //reset to previous value
        }
      });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    //viewmodel -> element
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(value);
  }
}


function viewModel() {
  this.myNumber = ko.observable();
  this.myValidator = function(value) {
    var decimalPos = value.indexOf('.');
    if (decimalPos > 0) {
      var decimal = value.substring(decimalPos+1);
      if (decimal.length > 3) {
        return false;
      }
    }
    var numeric = Number(value);
    if (isNaN(numeric) || numeric > 100) {
      return false;
    }

    return true;
  }
}

ko.applyBindings(new viewModel());

＆＃13;

我想在输入

3 个答案: