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對象，我該如何解析它？

回答

相關問題