號碼輸入字段失去專注於驗證變更

當從無效到有效的驗證狀態的變化，當前輸入字段失去其在Firefox（Minimum working example in jsFiddle）重點：號碼輸入字段失去專注於驗證變更

<div ng-repeat="elem in list track by $index"> 
    <ng-form name='innerform'> 
     <input name="id" type="number" ng-model="elem.id" required/> 
     <div ng-if="innerform.id.$error.required">Required!</div> 
    </ng-form> 
</div>

這種行爲似乎在火狐只發生和只能用'數字'類型的輸入字段。將其更改爲「文本」或使用Chrome瀏覽器，它工作正常。

我在這裏做錯了還是在AngularJS或FireFox中的錯誤？

來源

2014-07-25 hoeni

我沒有任何問題，我嘗試過使用Chrome和Firefox，您使用的是哪種瀏覽器版本？ – ex0ns

是的，它失去了，Mac的Firefox。可能是一個bug .. – gorpacrate

Win7上的Firefox 30和31。 Chrome 36.0的作品 – hoeni

這是在Firefox的錯誤插入塊時進入內聯元件，而不是在AngularJS。爲即將到來的FF版本的修復程序是已經方式：https://bugzilla.mozilla.org/show_bug.cgi?id=1045270

同時一個好的解決辦法是提出caitp上https://github.com/angular/angular.js/issues/8365：

添加樣式=「顯示：塊;」或style =「display：inline-block;」（或者只是在CSS文件或樣式標記中添加這些元素）（對於原始問題，ng形式）---或者對塊元素使用ng-form屬性。

來源

2014-08-08 12:40:28 hoeni

剛剛測試過：它在Firefox 32.0.3中運行良好 – hoeni

此問題發生的主要原因是type =「number」。將其更改爲type =「email」或其他工作正常。

Firefox似乎不支持type =「number」，但是，angular會對Firefox進行填充以使type =「number」輸入字段在Firefox中正確運行（在驗證等方面）。

爲了使其工作，它使用輸入數字填充。 SEE HERE

SEE RELATED QUESTION HERE

來源

2014-07-25 13:35:44 Roshan

這對理解非常有幫助，謝謝。但即使加載了額外的polyfill，它仍然失去了重點。但我只需用文本字段替換數字字段即可開始。 – hoeni

我沒有意識到數字驗證（最小，最大）被綁定到type =「number」，所以當轉換爲「text」時，我將失去所有我的號碼驗證:-( 所以我將不得不修復失去焦點... 我不在乎工作上/下按鈕等 – hoeni

好吧我會照顧它。讓我試試 – Roshan

號碼輸入字段失去專注於驗證變更

回答

相關問題