JavaScript函数返回html对象，如何解析？

我有一个AngularJS（1.4）应用程序，我正试图通过一个指令操作输入type=“number”。 我必须使用type=“number”，因为在iOs上使用type=“tel”时，字符“.”不会出现在键盘上，因此无法插入小数

目标是让用户在“.”之前最多插入3位，在“.”之后最多插入2位。点的数量不得超过一个。这是我在输入字段中想要的格式。 问题是，如果我通过，我会在指令中打印变量this.value，它不包含任何“.”

以下是html代码：

<input required type='number' limit-to-number="3" number-of-decimals="2" ng-required="true" ng-model="invoice.price">

我尝试了不同的方法，主要问题是这个.value不包含“”。 例如，如果表单中的输入为“12”：

但如果表单中的输入为“……12……”：

但我注意到打印“this”会返回输入的整个html：

<input required type='number' limit-to-number="3" number-of-decimals="2" ng-required="true" ng-model="invoice.price" name="price" aria-invalid="false">
    #shadow-root (user-agent)
        <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
            <div id="editing-view-port">
                <div id="inner-editor">12.</div>
...

如何从对象“this”提取div值



您可以使用

<input type="number" step="0.01" max="999.99" min="0" required />

当然，您必须在提交后验证用户的输入（例如，角度表单验证）

试试这个：

.directive('limitToNumber', function () {
 return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, element, attrs, modelCtrl) {
        modelCtrl.$parsers.push(function (inputValue) {
            // inputValue variable will contain the input box value
            var limit = parseInt(attrs.limitToNumber);
            var number_of_decimals = parseInt(attrs.numberOfDecimals);
            var digit_array = [];

            if (inputValue == undefined) return '';

            // Your transformation code will be written here
            // Assign the transformed value to transformedInput variable
            var transformedInput = '';

            if (transformedInput !== inputValue) {
                // This will update the input box
                modelCtrl.$setViewValue(transformedInput);
                modelCtrl.$render();
            }

            return transformedInput;
        });
    }
  };
});

---

如果有帮助，请告诉我

this.value为空，原因是输入类型为number您确定类型number支持点，因为我可以插入点！问题在于，手机上的type=“string”无法显示数字键盘（用户体验不佳），而iPhone上的type=“tel”则无法插入点（功能体验不佳）。这就是为什么我尝试使用type=“number”我看不出有问题

12

不包含点，但您希望该值包含一个点吗

..12..

不是一个数字，但您希望得到该值吗？模型总是一个数字。你想用这个数字做什么取决于你。问题是我不能允许用户插入多个“.”这不会阻止用户插入与我想要的不同的输入，例如：11111.111111或高于9999的数字，但是输入超出范围的字段将不会被验证，所以用户不提交它们。你应该总是验证你的输入。几乎在那里，我只需要截获按下的键，因为如果我达到极限，我会做一些类似于：e.preventDefault（）。在这种情况下，我怎么能做同样的事情？获取值并按下键？顺便说一句，指令中返回的inputValue没有注册所有的“.”，仍然存在相同的问题：输入“12”。-inputValue“12”。但是输入“12…”“inputValue”“很抱歉，评论太晚了。你能给我一把小提琴吗？

<input required type='number' limit-to-number="3" number-of-decimals="2" ng-required="true" ng-model="invoice.price" name="price" aria-invalid="false">
    #shadow-root (user-agent)
        <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
            <div id="editing-view-port">
                <div id="inner-editor">12.</div>
...

console.log(this.findElementById("inner-editor")); // -> Uncaught TypeError: this.getElementById is not a function

<input type="number" step="0.01" max="999.99" min="0" required />

.directive('limitToNumber', function () {
 return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, element, attrs, modelCtrl) {
        modelCtrl.$parsers.push(function (inputValue) {
            // inputValue variable will contain the input box value
            var limit = parseInt(attrs.limitToNumber);
            var number_of_decimals = parseInt(attrs.numberOfDecimals);
            var digit_array = [];

            if (inputValue == undefined) return '';

            // Your transformation code will be written here
            // Assign the transformed value to transformedInput variable
            var transformedInput = '';

            if (transformedInput !== inputValue) {
                // This will update the input box
                modelCtrl.$setViewValue(transformedInput);
                modelCtrl.$render();
            }

            return transformedInput;
        });
    }
  };
});