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

我有一个AngularJS（1.4）应用程序，我试图通过指令操纵输入类型=“数字”。我必须使用type =“number”，因为在iOs上type =“tel”字符“。”。没有出现在键盘上，这使插入小数的数字不可能。JavaScript函数返回html对象，我该如何解析它？

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

这里的html代码：

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

和这里的指令： “”

directive("limitToNumber", [function() { 
     return { 
      restrict: "A", 
      link: function(scope, elem, attrs) { 
       var limit = parseInt(attrs.limitToNumber); 
       var number_of_decimals = parseInt(attrs.numberOfDecimals); 
       var digit_array = []; 

       angular.element(elem).on("keydown", function(e) { 

       console.log(this); 

       }); 
      } 
     }; 
    }]).

我尝试不同的方法，主要的问题是，THIS.VALUE不包含。例如，如果在表格中输入是 “12”：

console.log(this.value) // -> 12

但是，如果在表格中输入是 “...... 12 .....”：

console.log(this.value) // -> "" empty string

但我注意到，打印只是“这个”返回输入的整个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> 
...

在使用id =“内的编辑器”股利我可以看到输入字段的精确值。现在的问题是，这是行不通的：

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

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

来源

2017-02-17 ste

this.value为空导致输入为类型numer –

您确定该类型编号支持点 – Armin

是的，因为我可以插入它们！问题是，在移动设备上使用type =“string”时，它不会显示数字键盘（糟糕的用户体验），并且iPhone上的type =“tel”无法插入点（功能不佳）。这就是为什么我试图使用type =“number” – ste

您可以使用

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

当然，您必须验证的用户输入后提交（角表单验证敌人例子）。

来源

2017-02-17 13:03:50

这不会阻止用户插入与我想要的不同输入，例如：11111.111111或高于999的数字 – ste

但超出范围输入的字段不会被验证，因此用户不会提交它们。您应该始终验证您的输入。 –

试试这个：

.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; 
     }); 
    } 
    }; 
});

请让我知道，如果有帮助！

来源

2017-02-17 13:04:50

几乎在那里，我只需要拦截按键，因为如果我达到极限，我会做类似于：e.preventDefault（）。在这种情况下我怎么能做到这一点？获得价值和按键？ – ste

顺便说一下，在指令中返回的inputValue没有注册所有的“。”，仍然是同样的问题：输入“12.”。 - inputValue“12.”但是输入“12 .....”inputValue“” – ste

对于迟到的评论抱歉。你能给我一个小提琴吗？ –

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

回答

相关问题